6

我经常在我的网站上使用 abbr（以前是首字母缩写词）标签。但我注意到此标签不适用于移动/平板设备（触摸设备）。所以我的问题是：我怎样才能让它发挥作用？

我在互联网上搜索了一些解决方案，但它们并不完全有用：

解决方案1：

abbr[title]:after
{
   content: " (" attr(title) ")";
}

@media screen and (min-width: 1025px)
{
   abbr[title]
   {
      border-bottom: 1px dashed #ADADAD;
      cursor:help;
   }

   abbr[title]:after
   {
      content: "";
   }
}

解决方案2：

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { $('abbr').each(function() { $(this).click(function() { alert($(this).attr('title')); }); }); }

没有一个是完全令人满意的！因此，非常感谢一些替代方案！

4

2 回答 2

4

在这里，在 2016 年，我的搜索结果是一样的。但我最终得到了一个简单的解决方法：我决定使用工具提示而不是警报。

此示例适用于jQuery和引导工具提示 。

因此，在解决方案 2中，在您检测到移动设备后（如您所愿）：

$('abbr').attr('data-toggle', 'tooltip'); // add atribute to all abbrs
$('[data-toggle="tooltip"]').tooltip(); // initialize tooltips on all abbrs
于 2016-08-01T22:48:44.410 回答
0

感谢这个家伙。 https://bitsofco.de/making-abbr-work-for-touchscreen-keyboard-mouse/

这是针对此问题的 CSS 解决方案。

<style>
@media screen and (min-width: 0px) {
    abbr[data-title] {
        position: relative;

        /* ensure consistent styling across browsers */
        text-decoration: underline dotted;
    }

    abbr[data-title]:hover::after,
    abbr[data-title]:focus::after {
        content: attr(data-title);

        /* position tooltip like the native one */
        position: absolute;
        left: 0;
        bottom: -30px;
        width: auto;
        white-space: nowrap;

        /* style tooltip */
        background-color: #1e1e1e;
        color: #fff;
        border-radius: 3px;
        box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.4);
        font-size: 14px;
        padding: 3px 5px;
    }
}

</style>

标签的title属性abbr会导致重复问题，这就是为什么我们可以使用 更改title属性data-title并将解决重复问题。要在任何尺寸上使用此功能，我min-width将0px

我们可以abbr在手机屏幕或PC屏幕上点击标签，它会以相同的方式工作，没有任何重复。我已经在 Chrome 上尝试过了，它运行良好。

于 2021-09-27T20:39:57.257 回答