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!

Those web browsers should doing this for us but in 2022 still nothing. — vee, Aug 28 '22 at 04:33

score 4 · Answer 1 · answered Aug 01 '16 at 22:48

4

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

answered Aug 01 '16 at 22:48

voznik

396
5
11

This solved my problem also - however please note that you need to include popper.js (add following to bootstrap bundle before bootstrap.js `"~/Scripts/umd/popper.js"`) – Dominic Cotton Aug 02 '18 at 10:48

score 3 · Answer 2 · answered Sep 27 '21 at 20:39

Thanks to this Guy. https://bitsofco.de/making-abbr-work-for-touchscreen-keyboard-mouse/

Here is the CSS solution to this problem.

<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>

The title attribute of the abbr tag will cause the duplication issue that is why we can change the title attribute with the data-title and will solve the duplication issue. To use this feature on any size i have kept the min-width to 0px

We can click the abbr tag on a mobile screen or PC screen and it will work in the same way without any duplication. I have tried it on Chrome and it's working fine.

While I like this solution, the data-title is *not* entirely visible when it is positioned too much to the right or bottom of the screen. This happens a lot on mobile, since data-titles tend to be long and the mobile screen width is rather small. — Code4R7, Aug 30 '23 at 09:11

Display abbr and acronym on mobile devices

2 Answers2