CSS Info-bulle
Info-bulle CSS
Une info-bulle CSS sert à fournir des informations supplémentaires sur un élément lorsque l'utilisateur déplace le pointeur de la souris dessus :
Créer une Info-bulle de Base en CSS
Créez une info-bulle qui apparaît lorsque l'utilisateur déplace la souris sur un élément :
Exemple
<style>
/* Conteneur de l'info-bulle */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* Ajouter des points sous le texte survolable */
cursor: pointer;
}
/* Texte de l'info-bulle */
.tooltiptext {
visibility: hidden; /* Caché par défaut */
width: 130px;
background-color: black;
color: #ffffff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1; /* Assurez-vous que l'info-bulle est affichée au-dessus du contenu */
}
/* Afficher le texte de l'info-bulle au survol */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip"> Survolez-moi
<span class="tooltiptext"> Du texte d'info-bulle </span>
</div> Exemple Expliqué
HTML :
- Utilisez un élément conteneur (comme <div>) et ajoutez la classe
"tooltip"à celui-ci. Lorsque l'utilisateur survole ce <div>, cela affichera le texte de l'info-bulle. - Le texte de l'info-bulle est placé à l'intérieur d'un élément en ligne (comme <span>) avec
class="tooltiptext".
CSS :
- La classe
tooltiputiliseposition:relative, ce qui est nécessaire pour positionner le texte de l'info-bulle (position:absolute). Astuce : Consultez les exemples ci-dessous pour savoir comment positionner l'info-bulle. - La classe
tooltiptextcontient le texte réel de l'info-bulle. Il est caché par défaut et sera visible au survol. - Le sélecteur
:hoverest utilisé pour afficher le texte de l'info-bulle lorsque l'utilisateur déplace la souris sur le <div> avecclass="tooltip".
Positionnement de l'Info-bulle
Vous pouvez positionner l'info-bulle comme vous le souhaitez. Ici, nous allons montrer comment la placer à gauche, à droite, en haut et en bas.
Info-bulle Alignée à Droite et à Gauche
Dans cet exemple, l'info-bulle est placée à droite ( left:105% ) du texte "survolable" (<div>). Notez également que top:-5px est utilisé pour la centrer dans son élément conteneur. Nous utilisons le nombre 5 car le texte de l'info-bulle a un rembourrage supérieur et inférieur de 5px. Si vous augmentez son rembourrage, augmentez également la valeur de la propriété top pour vous assurer qu'elle reste centrée (si c'est ce que vous souhaitez). Il en va de même si vous souhaitez que l'info-bulle soit placée à gauche.
Exemple
Info-bulle alignée à droite :
.tooltiptext {
top: -5px;
left: 105%;
} Résultat :
Exemple
Info-bulle alignée à gauche :
.tooltiptext {
top: -5px;
right: 105%;
} Résultat :
Info-bulle Alignée en Haut et en Bas
Si vous souhaitez que l'info-bulle apparaisse en haut ou en bas, consultez les exemples ci-dessous. Notez que nous utilisons la propriété margin-left avec une valeur de moins 65 pixels. Cela permet de centrer l'info-bulle au-dessus/en dessous du texte survolable. Elle est réglée à la moitié de la largeur de l'info-bulle (130/2 = 65).
Exemple
Info-bulle alignée en haut :
.tooltiptext {
width: 130px;
bottom: 100%;
left: 65%;
margin-left: -65px; /* Utilisez la moitié de la largeur (130/2 = 65), pour centrer l'info-bulle */
} Résultat :
Exemple
Info-bulle alignée en bas :
.tooltiptext {
width: 130px;
top: 100%;
left: 50%;
margin-left: -65px; /* Utilisez la moitié de la largeur (130/2 = 65), pour centrer l'info-bulle */
} Résultat :
Flèches d'Info-bulle
Pour créer une flèche qui doit apparaître d'un côté spécifique de l'info-bulle, ajoutez un contenu "vide" après l'info-bulle, avec la classe de pseudo-élément ::after ainsi que la propriété content . La flèche elle-même est créée en utilisant des bordures. Cela fera en sorte que l'info-bulle ressemble à une bulle de dialogue.
Cet exemple démontre comment ajouter une flèche en bas de l'info-bulle :
Flèche du Bas
.tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* En bas de l'info-bulle */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
} Résultat :
Exemple Expliqué
Positionnez la flèche à l'intérieur de l'info-bulle : top: 100% placera la flèche en bas de l'info-bulle. left: 50% centrera la flèche.
Remarque : La propriété border-width spécifie la taille de la flèche. Si vous changez cela, changez également la valeur de margin-left pour qu'elle soit identique. Cela gardera la flèche centrée.
La border-color est utilisée pour transformer le contenu en flèche. Nous avons défini la bordure supérieure en noir, et le reste en transparent. Si tous les côtés étaient noirs, vous obtiendriez une boîte carrée noire.
Cet exemple démontre comment ajouter une flèche en haut de l'info-bulle. Remarquez que nous avons défini la couleur de la bordure inférieure cette fois :
Flèche du Haut
.tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* En haut de l'info-bulle */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
} Résultat :
Cet exemple démontre comment ajouter une flèche à gauche de l'info-bulle :
Flèche de Gauche
.tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* À gauche de l'info-bulle */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
} Résultat :
Cet exemple démontre comment ajouter une flèche à droite de l'info-bulle :
Flèche de Droite
.tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* À droite de l'info-bulle */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
} Résultat :
Info-bulle avec Effet de Fondu
Si vous souhaitez une info-bulle qui s'estompe, utilisez la propriété CSS transition et la propriété opacity , et passez d'une invisibilité totale à 100 % de visibilité, en un nombre de secondes spécifiées (2 secondes dans notre exemple) :
Exemple
.tooltiptext {
opacity: 0;
transition: opacity 2s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}