Info-bulles

Fait partie de la section Practical Frontend du Journey HTML de Coddy — leçon 23 sur 35.

Les info-bulles sont de petits éléments contextuels informatifs qui apparaissent lorsqu'un utilisateur survole ou se concentre sur un élément d'interface. Elles fournissent un contexte supplémentaire sans encombrer l'interface utilisateur principale.

Créons une infobulle de base en utilisant HTML et CSS :

Tout d'abord, créez la structure HTML :

<div class="tooltip-container">
  <button>Hover over me</button>
  <span class="tooltip">This is a tooltip!</span>
</div>

Ensuite, ajoutez le CSS pour positionner et afficher/masquer l'infobulle :

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  visibility: hidden; 
  /* Positionner l'infobulle */
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  
  /* Ajouter un léger délai avant l'affichage */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Afficher l'infobulle lors du survol du conteneur */
.tooltip-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

Avec ce code, lorsque vous survolez le bouton, une info-bulle apparaîtra au-dessus de celui-ci.

Défi

Facile

On vous donne un bouton HTML avec une info-bulle qui apparaît lorsque l'utilisateur survole le bouton "Help". Votre tâche :

Masquer l'info-bulle par défaut.
Ajouter une couleur d'arrière-plan et une couleur de texte pour qu'elle se démarque.
Centrer le texte à l'intérieur de l'info-bulle.
Ajouter un peu de rembourrage (padding) pour que l'info-bulle soit plus esthétique.
Arrondir les coins avec border-radius.

Aide-mémoire

Les info-bulles sont de petits éléments contextuels informatifs qui apparaissent au survol des éléments de l'interface.

Structure HTML de base :

<div class="tooltip-container">
  <button>Hover over me</button>
  <span class="tooltip">This is a tooltip!</span>
</div>

CSS pour le positionnement et l'affichage/masquage des info-bulles :

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  visibility: hidden; 
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
  <title>Tooltips</title>
  <style>
    .tooltip-container {
      position: relative;
      display: inline-block;
      margin: 50px;
    }
    
    button {
      padding: 8px 16px;
      cursor: pointer;
    }
    
    .tooltip {
      
      /* Animation properties */
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    /* Show the tooltip when hovering over the container */
    .tooltip-container:hover .tooltip {
      visibility: visible;
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="tooltip-container">
    <button>Help</button>
    <span class="tooltip">Click for assistance</span>
  </div>
</body>
</html>