Can an abbr tag's title be styled?

Take the following code:

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

Can we style an abbr tag's title? So th开发者_如何学Pythonat instead of a custom tooltip we can use title?

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.

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.

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

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.