acronym - 在移动设备上显示缩写和首字母缩略词

Question

我经常在我的网站上使用缩写(以前的缩写词)标签。但我注意到这个标签不适用于移动/平板设备(触摸设备)。所以我的问题是:我怎样才能让它发挥作用？

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

解决方案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')); }); }); }

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

Answer 1

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

此示例适用于 jQuery & bootstrap tooltips .

因此，在解决方案 2 中，在检测到移动设备后(按照您的意愿进行操作):

$('abbr').attr('data-toggle', 'tooltip'); // add atribute to all abbrs
$('[data-toggle="tooltip"]').tooltip(); // initialize tooltips on all abbrs