Loading ...Css Tooltip ultra simple
Voici une petite astuce CSS pour afficher des tooltips (messages au survol de la souris sur les liens) donc sans avoir besoin de javascript.
Pour la partie CSS dans le head:
a:hover {background-color:#ffffff; text-decoration:none;} /* background-color pour IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:10px; width:150px;}
a.tooltip:hover span{display:inline; position:absolute; border:1px solid #cccccc; background:#ffffff; color:#dd;}
et dans la partie body de la page:
<a href= »# » class= »tooltip »>Article 1<span>Titre Article 1, descriptif Article 1.</span></a>.
Un petit Exemple disponible sur ici
J’ai essayé ce tooltip. Il est très simple d’utilisation, cependant je me permets une remarque :
pour qu’il marche sous mozilla firefox ET sous IE, il faut simplement déplacer le width de « a.tooltip span » à « a.tooltip:hover span ». Soit le code CSS suivant :
a:hover {background-color:#ffffff; text-decoration:none;} /* background-color pour IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:10px;}
a.tooltip:hover span{display:inline; position:absolute; border:1px solid #cccccc; background:#ffffff; color:#dd; width:150px;}
Merci pour cette astuce Admin