Info-bulle CSS


Table des matières

    Afficher la table des matières


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 :

Top Tooltip text
Right Tooltip text
Bottom Tooltip text
Left Tooltip text


Info-bulle de base

Créez une info-bulle qui apparaît lorsque l'utilisateur déplace la souris sur un élément :

Exemple

<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>


Exemple expliqué

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".



Info-bulles de positionnement

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.

Info-bulle de droite

.tooltip-local .tooltiptext {
  top: -5px;
  
left: 
105%; 
}

Résultat :

Hover over me Tooltip text

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>


Info-bulle gauche

.tooltip-local .tooltiptext {
  top: -5px;
  
right: 
105%; 
}

Résultat :

Hover over me Tooltip text

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).

Info-bulle supérieure

.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 :

Hover over me Tooltip text

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>


Info-bulle inférieure

.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 :

Hover over me Tooltip text

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>



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 "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 :

Flèche inférieure

.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 :

Hover over me Tooltip text

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>


Exemple expliqué

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 :

Flèche supé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 :

Hover over me Tooltip text

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 :

Flèche gauche

.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 :

Hover over me Tooltip text

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 :

Flèche droite

.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 :

Hover over me Tooltip text

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>



Fondu dans les info-bulles (Animation)

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) :

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>