Can I write the name of the abbr tag?

Question

Take the following code:

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

Can we create an abbr tag header? So, instead of a custom tooltip, can we use a title?

Answer 1

If you mean the style of the actual text that appears, no, you cannot create a style using CSS; It depends on the browser. The Javascript-based tooltips will be the way I handled it, as it allows more control over this behavior.

Answer 2

Actually, Alex Macple's answer is incorrect. It is quite possible to do this using CSS for modern browsers. However, you can use the reserve for older browsers with JavaScript.

 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 in the upper right corner of the abbr tag, using the attribute contents inside the header when the abbr tag hangs.

Answer 3

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

Answer 4

You can customize the way the shortened version appears, so in this case, "WHO." But not the way the popup appears, as it is controlled by the browser / OS.

You can get around this by applying some jQuery to any abbr tag programmatically - this would display a div whose contents would look like the title in the tag that called it.