Comment créer une bulle d'information (tooltip) sur Webflow ?

Les tooltips sont des éléments d'interface utilisateur qui affichent des informations supplémentaires lorsque l'utilisateur survole un élément spécifique, comme une icône. Ils sont très utiles pour fournir des détails contextuels sans encombrer l'interface. Dans cet article, nous allons vous montrer comment créer un tooltip sur Webflow, en utilisant uniquement des outils et fonctionnalités intégrés.

Résumé de la méthode pour créer un tootltip sur Webflow

Pour créer un tooltip sur Webflow, vous devez utiliser des divs pour structurer le tooltip et son icône, puis appliquer des propriétés CSS telles que la position relative et absolue. Vous utiliserez également des interactions pour faire apparaître et disparaître le tooltip de manière fluide. Suivez les étapes ci-dessous pour créer un tooltip entièrement fonctionnel.

Étape 1 : Créer la Structure du Tooltip

1. Ajouter un Conteneur de Base :
   • Commencez par créer une div qui servira de conteneur principal pour l'élément que vous souhaitez survoler (par exemple, une icône d'information).
   • Configurez cette div en display: flex avec un petit écart (gap) pour espacer les éléments de manière uniforme.
2. Ajouter l'Icone d'Information :
   • Ajoutez une div à l'intérieur du conteneur principal pour l'icône, et nommez-la tooltip-wrapper.
   • Insérez l'icône d'information de votre choix à l'intérieur de cette div. Vous pouvez utiliser une icône personnalisée ou en choisir une dans une bibliothèque comme Relume.
3. Positionner le Conteneur :
   • Réglez la position de la tooltip-wrapper en relative pour que le tooltip soit positionné par rapport à cet élément.

Étape 2 : Créer et Styliser le Tooltip

1. Ajouter le Contenu du Tooltip :
   • Créez une nouvelle div à l'intérieur de la tooltip-wrapper, nommez-la tooltip-component, et positionnez-la en absolute.
   • Ajoutez du texte à l'intérieur de cette div, et stylisez-le (couleur de texte blanche, fond noir, etc.). Ajustez également le border-radius pour adoucir les coins.
2. Définir les Dimensions :
   • Ajustez la largeur du tooltip en fonction du texte qu'il contient, par exemple à 7rem ou 8rem.
   • Ajoutez du padding pour laisser respirer le contenu.
3. Positionner le Tooltip :
   • Pour centrer le tooltip sous l'icône, utilisez des valeurs de top et left à 50%, puis appliquez une transformation translate de -50% pour aligner le centre du tooltip avec l'icône.

Étape 3 : Ajouter une Flèche au Tooltip

1. Créer la Flèche :
   • Ajoutez une nouvelle div à l'intérieur de tooltip-component, nommez-la tooltip-arrow.
   • Positionnez-la en absolute et utilisez des bordures CSS pour créer un triangle (la flèche). Par exemple, appliquez des bordures sur les côtés gauche, droit et haut pour former la flèche.
2. Positionner la Flèche :
   • Centrez la flèche en utilisant top: 50% et left: 50%, puis appliquez une transformation pour aligner correctement la flèche avec le tooltip.

Étape 4 : Ajouter les Interactions

1. Configurer l'Apparition du Tooltip :
   • Sélectionnez tooltip-wrapper et créez une nouvelle interaction pour l'événement hover.
   • Configurez l'animation pour que le tooltip apparaisse avec une opacité de 0% à 100% et un mouvement léger (par exemple, de -5px à 0px sur l'axe Y).
2. Configurer la Disparition du Tooltip :
   • Créez une animation inverse pour l'événement hover out, où le tooltip disparaît de 100% à 0% en revenant à sa position initiale.
3. Ajuster la Durée de l'Animation :
   • Réglez la durée de l'animation à environ 0,3s pour un effet fluide.

‍

Créer un tooltip sur Webflow est un moyen efficace d'améliorer l'expérience utilisateur sur votre site. En suivant ces étapes, vous pouvez facilement intégrer des tooltips dynamiques et esthétiques, sans utiliser de code supplémentaire.