Info-bulles

Fait partie de la section Front-end pratique du Journey HTML de Coddy. Leçon 23 sur 35.

Les info-bulles sont de petits éléments contextuels qui apparaissent lorsqu’un utilisateur passe la souris sur un élément d’interface ou le sélectionne. Elles fournissent des informations supplémentaires sans encombrer l’interface principale.

Créons une infobulle de base avec HTML et CSS :

Tout d’abord, crée la structure HTML :

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

Ensuite, ajoute le CSS pour positionner l’infobulle et contrôler son affichage :

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

.tooltip {
  visibility: hidden; 
  /* Positionner l’infobulle */
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  
  /* Faire apparaître et disparaître l’infobulle progressivement */
  opacity: 0;
  transition: opacity 0.3s;
}

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

Avec ce code, lorsque tu survoles le bouton, une infobulle apparaîtra au-dessus.

Défi

Facile

On te fournit un bouton HTML avec une info-bulle qui apparaît lorsque l’utilisateur survole le bouton "Help". Ta tâche :

Masquer l’info-bulle par défaut.
Ajouter une couleur d’arrière-plan et une couleur de texte pour la faire ressortir.
Centrer le texte dans l’info-bulle.
Ajouter un peu de marge intérieure pour améliorer l’apparence de l’info-bulle.
Arrondir les coins avec border-radius.

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>