Les infobulles

Bonjour !

Voilà un petit tutoriel pour réaliser des infobulles simplement et surtout, comprendre comment ça fonctionne et comment les modifier. On voit beaucoup sur internet des div ou des tableaux dans des spans, etc. Pas terrible et pas valide au niveau W3C (si tu ne sais pas ce que c'est, pas de panique c'est pas grave, en gros c'est juste que notre code n'est pas valide, même si l'affichage est ok ^^). Ici, on va faire des infobulles assez facilement, tu vas voir !


Souvent, sur les en-têtes il y a des infobulles pour présenter le staff. Tu vois un peu mieux ? Plus simplement, une infobulle est quelque chose qui s'affiche lorsqu'on passe notre souris sur l'élément qui la contient : ça nous donne des informations complémentaires.


Pour cette première infobulle, nous allons la faire se déclencher quand la souris passera sur l'image de l'avatar du membre du staff par exemple. On va avoir plusieurs éléments :
-> La partie qui va faire se déclencher l'infobulle
-> La partie interne à l'infobulle.
Nous allons donc avoir deux div imbriquées (l'une avec l'image qui va déclencher et l'autre avec le contenu). Pour le moment, on va dire que dans l'infobulle on veut deux liens

Code:

<div>
  <img src="http://i60.tinypic.com/9t32i1.png" alt="avatar Pseudo" />
  <div>
     <a href="#">Nom</a> <br />
     <a href="#">Poste</a>  
  </div>
</div>

Pour le moment on a donc ceci :

Spoiler:

Maintenant on va utiliser du css pour cacher la div secondaire. On va commencer par attribuer une class à notre première div, comme ceci :

Code:

<div class="declencheur">
 <img src="http://i60.tinypic.com/9t32i1.png" alt="avatar Pseudo" />
 <div>
    <a href="#">Nom</a> <br />
    <a href="#">Poste</a>  
 </div>
</div>

Puis dans la CSS on va lui dire : la div qu'il y a dans la div "déclencheur", tu la caches.

Code:

.declencheur div{
display:none;
}

Si on fait un aperçu maintenant : la partie intérieure est cachée, mais elle ne s'affiche pas quand on passe sur l'image. On va donc dire à notre CSS : quand on passe (hover) sur la div "déclencheur", tu vas afficher la div interne. On va aussi lui mettre des propriétés, à cette div, pour qu'elle ne soit pas toute transparente.

Code:


.declencheur{
position:relative; /* On dit que le "absolute" qui va arriver plus tard se placera par rapport à ceci.*/
}

.declencheur:hover div{
display:inline; /*On affiche la div*/
position:absolute; /*On lui dit de se placer par rapport à la première div*/
color:white; /*Le texte en blanc*/
background:black; /*le fond en noir*/
padding:15px; /*on met de l'espace à l'intérieur*/
border : 1px solid green; /*Et une bordure*/
}

Là, si on prévisualise le rendu, on a ceci quand on passe la souris sur l'image :

Spoiler:

Il ne nous reste plus qu'à placer la div interne comme on le souhaite avec des marges : par exemple 17px en haut et -35px à gauche

Code:

.declencheur:hover div{
display:inline;
position:absolute;
top:17px;
right:35px;
color:white;
background:black;
padding:15px;
border : 1px solid green;
}

Et le tour est joué !

Spoiler:

Pour ceux qui ont suivi les tutos plus "simples" ils vont tout de suite comprendre pourquoi : on utilise une balise block, donc pas défaut elles vont se mettre les unes en dessous des autres quand on voudra mettre plusieurs infobulles.
Pour régler le soucis : pas de problème, on dit à notre déclencheur de devenir "flottant". et pour éviter qu'elles soient toutes collées, on met aussi des marges !

Code:

.declencheur{
float:left;
position:relative;
margin:5px;
}

Et comme on a mit un float, on oublie pas de l'annuler quand on a mis toutes nos infobulles :

Code:

<div class="declencheur">
  <img src="http://i60.tinypic.com/9t32i1.png" alt="avatar Pseudo" />
  <div>
     <a href="#">Nom</a> <br />
     <a href="#">Poste</a>  
  </div>
</div>
<div class="declencheur">
  <img src="http://i60.tinypic.com/9t32i1.png" alt="avatar Pseudo" />
  <div>
     <a href="#">Nom</a> <br />
     <a href="#">Poste</a>  
  </div>
</div>
<div class="declencheur">
  <img src="http://i60.tinypic.com/9t32i1.png" alt="avatar Pseudo" />
  <div>
     <a href="#">Nom</a> <br />
     <a href="#">Poste</a>  
  </div>
</div>
<div style="clear:both;"></div>

Eh oui, quand on passe sur une image, la div interne s'affiche mais est masquée par la div d'à coté !

Spoiler:

Eh oui : on va donc lui dire via la CSS : passe par dessus. Vous expliquer ce code serait un peu inutile, mais il vous suffit de rajouter :

Code:

z-index:2;

à

Code:

.declencheur:hover div

Tu peux mettre 99 ou autre pour être sûr que ça passe au dessus de tout

---

Et voilà ! Tu as tes infobulles ! Et comme je suis super gentille, j'te remets les codes complets.

Spoiler:

---

En espérant que ça t'aidera à faire des infobulles valides auprès de W3C