Can an abbr tag's title be styled?

Question

Take the following code:

<abbr title="World Health Organization">WHO</abbr>

Can we style an abbr tag's title? So that instead of a custom tooltip we can use title?

FYI on Firefox the abbr tag has a dotted underline to indicate there's something worth hovering over, but not on Chrome or IE. But they can be styled to have it like so: http://html5doctor.com/the-abbr-element/ — Matthew Lock, May 25 '16 at 03:06

score 28 · Answer 1 · edited Aug 23 '13 at 16:05

28

Actually, Alex Mcp’s answer is incorrect. It is entirely possible to do this with CSS for modern browsers. However, a fallback for older browsers with JavaScript may be used.

abbr {
    position: relative;
}

abbr:hover::after {
    position: absolute;
    bottom: 100%;
    left: 100%;
    display: block;
    padding: 1em;
    background: yellow;
    content: attr(title);
}

This will add an absolutely positioned pseudo element top right of the abbr tag using the attribute content within the title when the abbr tag is hovered over.

edited Aug 23 '13 at 16:05

KyleMit

30,350
66
462
664

answered Jul 08 '12 at 12:20

DigiKev

1,071
3
11
19

I see the yellow background but `content: attr(title);` isn't working. There's no text. – Pacerier Jul 13 '12 at 00:15
It actually does work if you give the element that contains the abbr `position: relative;` – Aug 30 '13 at 03:37
4

am I the only one this doesn't work for? even @SoonDead's fiddle doesn't work. if you leave the cursor on the abbr long enough you will see the old tooltip show up as well – George Feb 23 '15 at 20:50
@George yes that is true. you can [use javascript](http://jsfiddle.net/sSMKx/33/) to replace the tag and mimic functionality. – vinczemarton Feb 26 '15 at 07:18
1

Tried this today with Yandex and found the answer from @alex-mcp to be correct despite the difference in votes given this approach does not actually style the browser's pop-up tooltip, it emulates it. In my case I **saw two tooltips at the same time** using this approach: one faux and the other from the browser. – vhs Jan 31 '19 at 11:26

score 10 · Accepted Answer · edited Aug 03 '15 at 05:35

10

If you mean style the actual text that pops up, no you can't style that with CSS; it's browser-specific. Javascript-based tooltips would be the way I would handle it, since it allows to have more control over this behavior.

edited Aug 03 '15 at 05:35

e-sushi

13,786
10
38
57

answered Nov 05 '09 at 18:50

Alex Mcp

19,037
12
60
93

https://inclusive-components.design/tooltips-toggletips/ seems to be on a better track… – vhs Jan 31 '19 at 11:22

score 4 · Answer 3 · edited May 23 '17 at 11:53

I was looking for something similar and came up with the following alternative (tested on Firefox, Safari and Chrome on Mac, works with IE 7-10 when I clicked it), based on this link:

HTML:

<abbr title="My Custom Abbreviation" name="">Abbreviation</abbr>

jQuery:

$('[title]').each( function() {
    var mytitle = $(this);
    mytitle.data('title',mytitle.attr('title')); // get title attribute value
mytitle.attr('name', mytitle.attr('title')); // add title attribute value to NAME attribute
    mytitle.removeAttr('title'); // remove the title attribute, removing browser tooltip
});

CSS:

abbr {
    position: relative;
}
abbr:hover::after {
    position: absolute;
    bottom: 100%;
    left: 100%;
    display: block;
    padding: 1em;
    background: yellow;
    content: attr(name);
}

add `width:max-content;` to the pseudo element. This will give one line tooltip. Also we can use `data-title` instead of name attribute. — the Hutt, Oct 14 '21 at 07:31

Amadiere · Answer 4 · 2012-07-16T06:59:42.110

1

You can style the way the shortened version appears, so in this case 'WHO'. But not the way the pop up box appears, as that is controlled by the browser/OS.

You can get around this limitation by applying some JQuery stuff to any abbr tag programatically - this would display a div, of which the contents would read the same as the title on the tag that called it.

edited Jul 16 '12 at 06:59

answered Nov 05 '09 at 18:51

Amadiere

11,313
6
41
47

No, is deprecated. Use . – Pacerier Jul 13 '12 at 00:10

Can an abbr tag's title be styled?

4 Answers4

Linked