Kann der Titel eines abbr-Tags formatiert werden?

Question

Nehmen Sie den folgenden Code ein:

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

können wir ein abbr-Tag Titel Stil? Also können wir anstelle eines benutzerdefinierten Tooltips Titel verwenden?

Answer 1

Wenn Sie meinen, der eigentliche Text, der auftaucht, nein, Sie können das nicht mit CSS stylen; es ist Browser-spezifisch. Javascript-basierte tooltips wäre die Art, wie ich damit umgehen würde, da es mehr Kontrolle über dieses Verhalten ermöglicht.

Answer 2

Sie können die Art verkürzen, wie die verkürzte Version angezeigt wird, in diesem Fall also "WHO". Aber nicht die Art, wie die Popup-Box erscheint, da diese vom Browser/Betriebssystem gesteuert wird.

Sie können rund um diese Einschränkung umgehen, indem programmatisch etwas JQuery Zeug zu jedem abbr Tag anwenden - dies würde eine div angezeigt werden, von denen der Inhalt der gleiche wie der title auf dem Tag lesen würde, die sie aufgerufen.

Answer 3

Eigentlich ist Alex Mcps Antwort falsch. Es ist durchaus möglich, dies mit CSS für moderne Browser zu tun. Es kann jedoch ein Ersatz für ältere Browser mit JavaScript verwendet werden.

abbr { 
    position: relative; 
} 

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

Dies wird ein absolut positionierte Pseudo-Element oben rechts auf den abbr-Tag fügen Sie das Attribut Inhalt innerhalb des Titels zu verwenden, wenn der abbr-Tag schwebt über ist.

Answer 4

Ich war auf der Suche nach etwas ähnlichem und kam mit den folgenden alternativen oben (getestet auf Firefox, Safari und Chrome auf dem Mac, arbeitet mit IE 7-10, wenn ich es angeklickt), basierend auf 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); 
}