Sembra che esiste infatti una soluzione CSS pura, che richiede solo l'espressione css attr
, il contenuto generato ei selettori di attributo (il che suggerisce che funzioni fino a IE8):
a[title]:hover:after {
content: attr(title);
position: absolute;
}
Fonte: http://jsfiddle.net/tDQWN/
aggiornamento w/input da @ViROscar: si prega di notare che non è necessario utilizzare alcun attributo specifico, anche se ho usato l'attributo "title" nell'esempio di cui sopra ; in realtà la mia raccomandazione sarebbe quella di utilizzare l'attributo "alt", in quanto vi è qualche possibilità che il contenuto sia accessibile agli utenti che non possono beneficiare dei CSS.
aggiornamento nuovamente Non sto cambiando il codice perché l'attributo "title" è sostanzialmente venuto a significare l'attributo "Tooltip", e non è probabilmente una buona idea per nascondere il testo importante all'interno di un campo accessibile solo al passaggio del mouse , ma se siete interessati a fare questo testo accessibile il "-label aria" attributo sembra il posto migliore per esso: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
fonte
2013-07-10 19:44:42
http: // StackOverflow.it/questions/36275678/how-to-create-a-tooltip –