L'attribut data-tip CSS

Version imprimable

15/11/2011, 06h19
isitien

L'attribut data-tip CSS
Bonjour,

J'ai trouve ce bout de code qui affiche des informations (tooltip) sur un lien en utilisant data-tip, je l'ai essaye mais ca marche pas:
Code:

1 2 <a id="embed" class="embed" href="#" style="float:right; background:url(watchLater.png) no-repeat;" data-tip="tooltip"></a>
merci de m'expliquer son utilite ainsi que comment faire ce tooltip
15/11/2011, 08h56
Bovino

Citation:

merci de m'expliquer son utilite

Ben aucune... data-tip n'existe pas en CSS...
J'imagine que c'est un attribut personnalisé utilisé par un script JavaScript pour afficher une infobulle.

Salut,

Citation:

Envoyé par Bovino

Ben aucune... data-tip n'existe pas en CSS...
J'imagine que c'est un attribut personnalisé utilisé par un script JavaScript pour afficher une infobulle.

Plus précisément c'est un attribut personnalisé. Il me semble que c'est standardisé avec HTML5 : on a le droit d'utiliser n'importe quel attribut à partir du moment où il commence par data-

Par contre on peut très bien utiliser cela via les CSS, avec un navigateur moderne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <!DOCTYPE html> <html> <head> <style> a[data-tip] { position: relative; } a[data-tip]:hover:after { content: attr(data-tip); position: absolute; top: 1em; left: 0; padding: 4px; background: rgba(0,0,0,0.7); color: #fff; text-decoration: none; } </style> </head> <body> <a href="#" data-tip="Message du tooltip">link avec tooltip</a> <a href="#">link</a> </body> </html>
a+++

16/11/2011, 08h57
isitien

Bovino: il n y a aucun code JS
adiGuba: merci pour le code je pense pas qu'il accepte du code HTML