in reply to Workarounds for <abbr> tag on mobile browsers

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

Replies are listed 'Best First'.
Re^2: Workarounds for <abbr> tag on mobile browsers
by LanX (Saint) on Sep 17, 2024 at 22:52 UTC
    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]

In Section Perl Monks Discussion