CSS

* {
 font-size: 11px; /* on définit les propriétés de texte pour toutes les balises */
 font-family: Tahoma` Verdana` Arial` serif;
}
a.infobulle {
 position: relative;
 color: black;
 text-decoration: none;
 border-bottom: 1px gray dotted; /* on souligne le texte */
}
a.infobulle span {
 display: none; /* on masque l'infobulle */
}
a.infobulle:hover {
 background: none; /* correction d'un bug IE */
 z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
 cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.infobulle:hover span {
 display: inline; /* on affiche l'infobulle */
 position: absolute;
 white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
 top: 30px; /* on positionne notre infobulle */
 left: 20px;
 background: white;
 color: green;
 padding: 3px;
 border: 1px solid green;
 border-left: 4px solid green;
}

Entre le

<a href="http://mon-asso.org" class="infobulle">
   le lien
   <span>le texte de votre infobulle</span>
</a>

Allez en spip aussi

imaginons que nous voulons afficher les articles d’une rubrique et que celles-ci, au survol de leur titre affichent une infiobulle constitué de son descriptif.

<BOUCLE_nomdemaboucle(ARTICLES){id_rubrique}>
<a href="http://mon-asso.org" class="infobulle">
   #TITRE
   <span>#DESCRIPTIF</span>
</a>
</BOUCLE_nomdemaboucle>

ben si c pas clair, et c vrai j’ai posé le code comme ca, raler en cliquant sur le bouton "donner votre avis" d:p.

ps : ces jolies infobulles peuvent être génantes dans la navigation… soyez parcimonieux. perso il faudrait possiblement l’utiliser + à l’horizontal.


Mutins :) , le 7/08/2008 (dernière modif : 24/06/2009)