Créez des info-bulles avec CSS.
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 :
Créez une info-bulle qui apparaît lorsque l'utilisateur déplace la souris sur un élément :
<style>
/* Tooltip container */
.tooltip-local {
position: relative;
display: inline-block;
border-bottom: 1px dotted
black; /* If you want dots under the hoverable text */
}
/* Tooltip text
*/
.tooltip-local .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-local:hover
.tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip-local">Hover
over me
<span class="tooltiptext">Tooltip
text</span>
</div>
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Basic Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in a desirable way.</p>
</body>
</html>
HTML : utilisez un élément conteneur (comme <div>) et ajoutez le "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 classe tooltip
utilise position:relative
, qui est nécessaire pour positionner le texte de l'info-bulle (position:absolute
). Remarque : Consultez les exemples ci-dessous pour savoir comment positionner l'info-bulle.
La classe tooltiptext
contient le texte réel de l'info-bulle. C'est masqué par défaut et sera visible au survol (voir ci-dessous). Nous avons également ajouté quelques styles de base : largeur de 120 px, couleur de fond noire, couleur de texte blanche, texte centré et remplissage supérieur et inférieur de 5 pixels.
La propriété CSS border-radius
est utilisée pour ajouter des coins arrondis à l'info-bulle texte.
Le sélecteur :hover
est utilisé pour afficher le texte de l'info-bulle lorsque l'utilisateur déplace le passez la souris sur le <div> avec class="tooltip"
.
Dans cet exemple, l'info-bulle est placée à droite (left:105%
) du "hoverable" texte (<div>). Notez également que top:-5px
est 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 haut et rembourrage inférieur de 5px. Si vous augmentez son remplissage, augmentez également la valeur de la propriété top
pour assurez-vous qu'il reste au milieu (si c'est quelque chose que vous souhaitez). Le même s'applique si vous souhaitez que l'info-bulle soit placée à gauche.
.tooltip-local .tooltiptext {
top: -5px;
left:
105%;
}
Résultat :
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: -5px;
left: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Right Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
.tooltip-local .tooltiptext {
top: -5px;
right:
105%;
}
Résultat :
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: -5px;
right: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Left Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Si vous souhaitez que l'info-bulle apparaisse en haut ou en bas, voir les exemples ci-dessous. Notez que nous utilisons la propriété margin-left
avec une valeur de moins 60 pixels. Il s'agit de centrer l'info-bulle au-dessus/en dessous du texte planable. Il est réglé à la moitié de la largeur de l'info-bulle (120/2=60).
.tooltip-local .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Résultat :
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
.tooltip-local .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Résultat :
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Bottom Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Pour créer une flèche qui doit apparaître d'un côté spécifique de l'info-bulle, ajoutez "vide" contenu après info-bulle, avec la classe de pseudo-éléments ::after
ainsi que le content
propriété. La flèche elle-même est créée à l'aide de bordures. Cela fera l'info-bulle ressemble à une bulle.
Cet exemple montre comment ajouter une flèche au bas de l'info-bulle :
.tooltip-local .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 :
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Top Tooltip w/ Bottom Arrow</h2>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Positionnez la flèche à l'intérieur de l'info-bulle : top : 100%
placera la flèche au en bas de l’info-bulle. gauche : 50 %
centrera la flèche.
Remarque : La propriété border-width
spécifie la taille du flèche. Si vous modifiez cela, modifiez également la valeur margin-left
par la même. Ce gardera la flèche centrée.
Le border-color
est utilisé pour transformer le contenu en flèche. Nous fixons le bordure supérieure en noir et le reste en transparent. Si tous les côtés étaient noirs, tu se retrouverait 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 cette fois la couleur de la bordure inférieure :
.tooltip-local .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 :
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Bottom Tooltip w/ Top Arrow</h2>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Cet exemple montre comment ajouter une flèche à gauche de l'info-bulle :
.tooltip-local .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 :
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 110%;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Right Tooltip w/ Left Arrow</h2>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Cet exemple montre comment ajouter une flèche à droite de l'info-bulle :
.tooltip-local .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 :
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
right: 110%;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Left Tooltip w/ Right Arrow</h2>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Si vous souhaitez faire apparaître en fondu le texte de l'info-bulle lorsqu'il est sur le point d'être visible, vous peut utiliser la propriété CSS transition
avec l'opacité
propriété, et passer de complètement invisible à 100% visible, en un nombre de secondes spécifié (1 seconde dans notre exemple) :
.tooltip-local .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip-local:hover
.tooltiptext {
opacity: 1;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<body style="text-align:center;">
<h2>Fade In Tooltip on Hover</h2>
<p>When you move the mouse over the text below, the tooltip text will fade in and take 1 second to go from completely invisible to visible.</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>