Catégories à fermer


Aller en bas
Mäven
Mäven
Informations : Présence aléatoire

Idea Viens papoter avec nous sur le discord

Messages : 1296
http://tambouille-raleuses.forumactif.com/

Les infobulles Empty Les infobulles

le Mar 16 Avr 2019 - 11:18

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 !

Qu'est-ce qu'une infobulle ?

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.

La partie HTML

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 Wink
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:
Les infobulles Infobu10

La Partie CSS

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:
Les infobulles Infobu11

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;
margin-top:17px;
margin-left:-35px;
color:white;
background:black;
padding:15px;
border : 1px solid green;
}
Et le tour est joué !
Spoiler:
Les infobulles Marge10

Euuuh, y a un soucis quand on en met plusieurs !

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>

Il y a un autre soucis !

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

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
Arrow Tu peux mettre 99 ou autre pour être sûr que ça passe au dessus de tout Wink


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

Code:
.declencheur{
float:left;
position:relative;
margin:5px;
}
.declencheur div{
display:none;
}
.declencheur:hover div{
display:inline;
position:absolute;
margin-top:17px;
margin-left:-35px;
color:white;
background:black;
padding:15px;
border : 1px solid green;
z-index:2;
}

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>


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

Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Le forum a ouvert ses portes le 30 mars 2019.

A l'époque, seules Miettes et Mäven y étaient présentes. A présent, il y a @membres_enregistres@ Tambouilleurs sur le forum. La dernière personne à nous avoir rejoint est @dernier_membre@.

D'ailleurs, les Tambouilleurs sont plutôt bavards. Eh oui, ils ont déjà posté @messages@ messages dont tutoriels et bidules en Libre-service.

Actuellement, il y a @enregistres@ membres connectés,
et @invites@ visiteurs sur La Tambouille

@@membres_connectes?Qui est là ?
@membres_connectes$, @.$Personne n'est en ligne.@@

@@derniers_membres_connectes?Tambouilleurs connectés au cours des 24 dernières heures : @derniers_membres_connectes$, @$Personne n'était là ces dernières heures.@@

Post-It des Râleuses