voici un petit bout de code Html et Css permettant d'afficher un Tooltip
sources : post d'inspiration initiale + les lumières de Ludo & surtout Thomas ^^ ...
code html :
<div class="showtooltipA">Hover over me!
<div class="tooltipA">this is my <a href="http://google.fr">wunderfull</a> tip displayed on hover only :)</div>
</div>
code css :
.showtooltipA { position: relative; } .showtooltipA .tooltipA { display: none; position: absolute; top:20px; left: 40px; border: 1px solid grey; background-color: lightyellow; padding:10px; font-size: 1em; } .showtooltipA:hover .tooltipA, .showtooltipA:focus .tooltipA { display: block; }
testez en live ici : http://jsfiddle.net/Vqmaw/2915/
version plus avancée : http://jsfiddle.net/Vqmaw/2920/
avantages :
- rapide à implémenter
- pas de dépendances requises
- pas de modification de la position des éléments encadrant le tooltip
inconvénients :
- très (trop?) simpliste
Autres exemples :
- Six revisions : http://sixrevisions.com/css/css-only-tooltips/
Aucun commentaire:
Enregistrer un commentaire