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?

Answer 1

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