rss

Un tooltip rapide stp..

Holla,

 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 <href="http://google.fr">wunderfull</atip displayed on hover only :)</div>
</div>


code css :

.showtooltipA {
  positionrelative;
}

.showtooltipA .tooltipA {
    displaynone;
    positionabsolute;
    top:20px;
    left40px;
    border1px solid grey;
    background-colorlightyellow;
    padding:10px;
    font-size1em;

}

.showtooltipA:hover .tooltipA,
.showtooltipA:focus .tooltipA {
    displayblock;
}

 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 :

Aucun commentaire:

Enregistrer un commentaire