Il titolo di un tag abbr può essere stilizzato?

Question

prendere il codice seguente:

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

Possiamo stile titolo di un tag abbr? In modo che invece di un tooltip personalizzato possiamo usare il titolo?

Answer 1

Se si intende lo stile il testo effettivo che si apre, non è possibile non farlo con i CSS; è specifico per il browser. tooltips basato su Javascript sarebbe il modo in cui lo gestirò, poiché consente di avere un maggiore controllo su questo comportamento.

Answer 2

È possibile lo stile il modo in cui viene visualizzata la versione abbreviata, quindi in questo caso 'CHI E'. Ma non il modo in cui appare la finestra pop-up, in quanto è controllata dal browser/OS.

Si può aggirare questa limitazione applicando alcune JQuery roba a qualsiasi abbr tag programatically - questo visualizzerebbe un div, i cui contenuti avrebbero letto la stessa della title sul tag che lo ha chiamato.

Answer 3

In realtà, la risposta di Alex Mcp non è corretta. È del tutto possibile farlo con i CSS per i browser moderni. Tuttavia, può essere utilizzato un fallback per i browser più vecchi con JavaScript.

abbr { 
    position: relative; 
} 

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

Ciò aggiungi posizionato in modo assoluto pseudo elemento superiore destra del tag abbr utilizzando il contenuto attributo all'interno del titolo quando il tag abbr passa sopra.

Answer 4

ero alla ricerca di qualcosa di simile e si avvicinò con la seguente alternativa (testato su Firefox, Safari e Chrome su Mac, funziona con IE 7-10 quando ho cliccato esso), sulla base di 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); 
}