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. 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

A voir aussi

  • Sam

    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 ;)

  • Miriave

    Très simple mais très utile,
    Merci :)

Réseau

Sites