Hi

Our <abbr> -tag doesn't work in mobile browsers, because there is no "mouse" to hover above.¹

This page https://www.audero.it/blog/2013/12/23/enhancing-the-abbr-element-on-mobile/ suggests a workaround by using fancy CSS code to dynamically enhance abbr-tags to show the message.

<Reveal this spoiler or all in this thread>

I've tested it in my On-Site CSS Markup, but unfortunately I couldn't make it work.

I'm too ignorant about CSS to tell if it ever worked or if I did it wrong.

Interestingly did Corion recently suggest a new HTML way to reveal text on click, using <details><summary> :

Click here to reveal spoiler Here is the hidden content

It would be nice if someone tried to combine the two approaches in a way that clicking on an abbreviation revealed the title text. Such a pure CSS solution has many advantages.

You can use your CSS markup settings for that.

I'm too busy to experiment right now, but wanted at least leave a note for others or for a future me. :)

Cheers Rolf
(addicted to the Perl Programming Language :)
see Wikisyntax for the Monastery

1) Perl Monks Approved HTML tags

Replies are listed 'Best First'.
Re: Workarounds for <abbr> tag on mobile browsers
by pryrt (Abbot) on Sep 17, 2024 at 20:52 UTC
    After some previous conversation about the hover dates on mobile (Re^3: RFC: "Today I Learned" page), I successfully applied similar results to abbr:

    @media (pointer: coarse), (hover: none) {
a.hoverDate:link:before { content: attr(title) ": "; font-size:75%; ba
+ckground: #ddd; foreground: #111; }
abbr:after { content: " {/" attr(title) "\05C}"; font-size:75%; backgr
+ound: #ddd; }
}

    [download]

    This works for me when I view your post in my mobile browser: I see it as <abbr> {/abbreviations\}

[reply]
[d/l]
[select]
      Cool, this works for me too! 🙂👍🏻

      I think it would be even cooler if we could combine it with <details><summary> (if possible)

      Like that an abbreviation would only be revealed on demand.

      Wouldn't won't to forcibly read the full length versions of YMMV or RTFM everywhere...

      Cheers Rolf
      (addicted to the Perl Programming Language :)
      see Wikisyntax for the Monastery

      Update

      Using your template, I was actually able to insert <details><summary> before and after, but no avail, HTML code is forcibly deactivated by escaping the < to &lt;

[reply]
[d/l]
[select]
        > Wouldn't won't to forcibly read the full length versions of YMMV or RTFM everywhere

        Missing lots of fun.

        map{substr$_->[0],$_->[1]||0,1}[\*||{},3],[[]],[ref qr-1,-,-1],[{}],[sub{}^*ARGV,3]
[reply]
[d/l]
Re: Workarounds for <abbr> tag on mobile browsers
by LanX (Saint) on Sep 17, 2024 at 22:10 UTC
    For completeness also tried the CSS solution from this SO thread

    https://stackoverflow.com/questions/34276581/display-abbr-and-acronym-on-mobile-devices

    Didn't work either, not sure if something else was interfering 

     
@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;
    }
}

    [download]

    Cheers Rolf
    (addicted to the Perl Programming Language :)
    see Wikisyntax for the Monastery

[reply]
[d/l]
      Did I mention that I have no time ATM? ;)

      This variation shows promising results, and could be used as a base for a stable solution

      (Not tested on desktop yet) 

       


    abbr[title] {
        position: relative;

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

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

        /* position tooltip like the native one */
        position: relative;
        left: 0;
        bottom: 2em;
        width: auto;
        white-space: nowrap;

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

      [download]

      Cheers Rolf
      (addicted to the Perl Programming Language :)
      see Wikisyntax for the Monastery

[reply]
[d/l]

Back to Perl Monks Discussion