Can an abbr tag's title be styled?

css abbr
Joemon picture Joemon · Nov 5, 2009 · Viewed 12.7k times · Source

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?

Answer

DigiKev picture DigiKev · Jul 8, 2012

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.

Related questions

Remove underlining caused by abbr tag

I use the <abbr> tag to show the full content of some trimmed words with the CSS property text-overflow: ellipsis . When using <abbr> these words get a dotted underline and on hover cursor changes to one …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More