Comment ajouter un tooltip dans Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ajouter des tooltips (infobulles) dans Webflow sans librairie externe, uniquement avec du CSS.

Exemple

1. Créez la structure HTML dans un Embed

Ajoutez un élément Embed dans votre page avec la structure suivante. Remplacez le texte du tooltip selon votre besoin.

2. Ajoutez ce CSS dans un embed ou dans vos styles globaux

.tooltip-wrapper { position: relative; display: inline-block; }
.tooltip {
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s;
}
.tooltip-wrapper:hover .tooltip { visibility: visible; opacity: 1; }

3. Publiez et testez

Le tooltip apparaît au survol avec une transition douce. Ajustez la valeur bottom: 125% pour positionner le tooltip en dessous (top: 125%) ou sur les côtés.

Conclusion

Les tooltips améliorent la compréhension sans encombrer l'interface. Cas d'usage :

• Explication d'un terme technique sur un formulaire
• Info complémentaire sur un prix ou une fonctionnalité
• Aide contextuelle sur des icônes sans label