Info- bulle CSS
Créez des info-bulles avec CSS.
Démo : exemples d'info-bulles
Une info-bulle est souvent utilisée pour spécifier des informations supplémentaires sur quelque chose lorsque l'utilisateur déplace le pointeur de la souris sur un élément :
Info-bulle de base
Créez une info-bulle qui apparaît lorsque l'utilisateur passe la souris sur un élément :
Exemple
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted
black; /* If you want dots under the hoverable text */
}
/* Tooltip text
*/
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show
the tooltip text when you mouse over the tooltip container */
.tooltip:hover
.tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover
over me
<span class="tooltiptext">Tooltip
text</span>
</div>
Exemple expliqué
HTML : utilisez un élément conteneur (comme <div>) et ajoutez-y la
"tooltip"classe. Lorsque l'utilisateur passe la souris sur ce <div>, il 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 tooltipclasse use position:relative, qui est nécessaire pour positionner le texte de l'infobulle ( position:absolute).
Remarque : Voir les exemples ci-dessous pour savoir comment positionner l'info-bulle.
La tooltiptextclasse contient le texte réel de l'info-bulle. Il est masqué par défaut et sera visible au survol (voir ci-dessous). Nous y avons également ajouté quelques styles de base : largeur de 120 px, couleur d'arrière-plan noire, couleur de texte blanche, texte centré et rembourrage supérieur et inférieur de 5 px.
La propriété CSS border-radiusest utilisée pour ajouter des coins arrondis au texte de l'info-bulle.
Le :hoversélecteur est utilisé pour afficher le texte de l'info-bulle lorsque l'utilisateur déplace la souris sur le <div> avec class="tooltip".
Info-bulles de positionnement
Dans cet exemple, l'info-bulle est placée à droite ( left:105%) du texte "survolable" (<div>). Notez également qu'il top:-5pxest utilisé pour le placer au milieu de son élément conteneur. Nous utilisons le chiffre 5 car le texte de l'info-bulle a un rembourrage supérieur et inférieur de 5 pixels. Si vous augmentez son rembourrage, augmentez également la valeur de la toppropriété pour vous assurer qu'elle reste au milieu (si c'est quelque chose que vous voulez). Il en va de même si vous souhaitez que l'info-bulle soit placée à gauche.
Info-bulle de droite
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
Résultat:
Info-bulle de gauche
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
Résultat:
Si vous souhaitez que l'info-bulle apparaisse en haut ou en bas, consultez les exemples ci-dessous. Notez que nous utilisons la margin-leftpropriété avec une valeur de moins 60 pixels. Cela permet de centrer l'info-bulle au-dessus/en dessous du texte survolable. Il est défini sur la moitié de la largeur de l'info-bulle (120/2 = 60).
Info-bulle supérieure
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Résultat:
Info-bulle du bas
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
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 ::afteravec la content
propriété. La flèche elle-même est créée à l'aide de bordures. Cela fera ressembler l'info-bulle à une bulle de dialogue.
Cet exemple montre comment ajouter une flèche au bas de l'info-bulle :
Flèche du bas
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%;
/* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
Résultat:
Exemple expliqué
Positionner la flèche à l'intérieur de l'infobulle : top: 100%placera la flèche au bas de l'infobulle. left: 50%centrera la flèche.
Remarque : La border-widthpropriété spécifie la taille de la flèche. Si vous modifiez cela, modifiez également la margin-leftvaleur pour qu'elle soit la même. Cela gardera la flèche centrée.
Le border-colorsert à transformer le contenu en flèche. Nous définissons la bordure supérieure en noir et le reste en transparent. Si tous les côtés étaient noirs, vous vous retrouveriez avec une boîte carrée noire.
Cet exemple montre comment ajouter une flèche en haut de l'info-bulle. Notez que nous définissons la couleur de la bordure inférieure cette fois :
Flèche du haut
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
Résultat:
Cet exemple montre comment ajouter une flèche à gauche de l'info-bulle :
Flèche gauche
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip
*/
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
Résultat:
Cet exemple montre comment ajouter une flèche à droite de l'info-bulle :
Flèche droite
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the
tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
Résultat:
Fondu dans les info-bulles (animation)
Si vous souhaitez faire disparaître le texte de l'info-bulle lorsqu'il est sur le point d'être visible, vous pouvez utiliser la transitionpropriété CSS avec la opacity
propriété et passer d'être complètement invisible à 100 % visible, en un certain nombre de secondes (1 seconde dans notre Exemple):
Exemple
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
}