Display abbr and acronym on mobile devices

Question

I frequently use the abbr (and formerly acronym) tag on my website. But I noticed that this tag is not working on mobile/tablet devices (touch devices). So my question is: How I can make it work?

I searched on the internet for some solutions, but they aren't fully useful:

Solution 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: "";
   }
}

Solution 2:

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

None of them is fully satisfying! So, some alternatives are much appreciated!

Answer 1

here, in 2016, results of my search were the same. but I ended up with a simple workaround: I've decided to use tooltips instead of alerts.

this example is for jQuery & bootstrap tooltips .

so, in Solution 2, after you detect mobile (do it as you wish):

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