Widget d'info-bulle d'élémenteur - Ajoutez des indices de survol n'importe où
L'élément Tooltip est un widget Elementor autonome Faites-le glisser à côté d'un champ de formulaire, à l'intérieur d'une table de tarification ou à côté d'un terme déroutant, et il restitue son propre déclencheur plus bulle d'info-bulle Si vous souhaitez attacher une info-bulle à un bouton, une icône ou une section qui existe déjà sur la page, utilisez le Extension ToolTIPS au lieu de cela.
Ce que vous pouvez faire avec le widget Tooltip
Contrôle de placement
Écrivez le texte de l'infobulle, puis choisissez où la bulle apparaît : variantes haut, bas, gauche, droite, plus début et fin Affinez-vous avec les décalages de pixels X et Y pour que la bulle ne recouvre jamais ce qu'elle explique.
- Expliquez les champs de formulaire, les prix ou le jargon là où la question se pose.
- Épinglez la bulle avec des décalages pour qu'elle efface les menus, les en-têtes collants et les boutons à proximité.
- Guidez les utilisateurs via des formulaires en plusieurs étapes avec de courtes indications contextuelles.
Styling : états normal et en vol stationnaire
Concevez séparément le déclencheur et la bulle Définissez l'arrière-plan, la couleur du texte, la typographie, le remplissage, le rayon de bordure, les bordures et l'ombre de la boîte Chaque propriété dispose de contrôles indépendants pour les états normal et de vol stationnaire.
- Correspondre exactement aux couleurs de la marque au lieu de vivre avec les valeurs par défaut du navigateur gris.
- Faites des indices subtils (contour fantôme) ou forts (pilule solide avec ombre) selon le contexte.
- Retour de vol stationnaire de style pour que les utilisateurs sachent que l'élément est interactif.
Déclencheur et animation
Déclenchez sur le vol stationnaire pour des indices rapides, cliquez sur pour les notes qui doivent rester ouvertes (cela fonctionne mieux sur les écrans tactiles) ou avec un déclencheur personnalisé Choisissez une animation d'entrée et définissez la durée et le délai de masquage Activez Suivez le curseur si vous souhaitez que la bulle suive la souris, ce qui convient aux cartes et aux diagrammes.
- Survolez pour la microcopie de bureau ; cliquez pour obtenir des indices persistants adaptés aux mobiles.
- Un fondu subtil ou une entrée à l'échelle attire le regard sans gêner l'utilisateur.
- Le délai de masquage empêche l'info-bulle de scintiller lorsque le curseur passe devant.
Élément ou Extension : de laquelle avez-vous besoin ?
Cette page (Élément de tooltip, gratuit): vous avez besoin d'un nouvel indice sur la page Le widget apporte son propre déclencheur, qui peut être du texte, une icône ou une image.
Extension Tooltips (Pro): vous avez déjà un bouton, une image ou un titre sur la page et souhaitez qu'une info-bulle y soit attachée.
Cas d'utilisation courants
- Formulaires : “Password a besoin de plus de 12 caractères” à côté de l'entrée, sans allonger le formulaire.
- Tables de tarification : définissez “per seat” vs “per workspace” inline.
- Boutons : clarifiez ce qui se passe après le clic (Aucune carte requise”).
- Liste des équipes : rôle, extrait bio ou raccourci de contact en vol stationnaire.
- Intégration : instructions courtes en plus des nouvelles fonctionnalités ou des widgets du tableau de bord.
Comment ajouter une infobulle dans Elementor
- Lâchez le widget Dans Elementor, recherchez “Tooltip” sous Master Addons et faites-le glisser là où l'indice appartient.
- Écrire et placer Entrez le texte de l'info-bulle, définissez le déclencheur (déplacer ou cliquer), choisissez le placement et les décalages.
- Stylez-le. Dans l'onglet Style, le design Normal et les états de Hover : couleurs, typographie, rayon, ombre Publiez.
- Vous voulez des captures d'écran de chaque paramètre ? lisez notre guide sur comment ajouter une infobulle dans Elementor.
Foire aux questions pour info-bulle
À quoi sert l'élément Tooltip ?
Ajout d'un contexte court et utile sans encombrer la mise en page : explications sur le terrain, définitions de termes, clarifications de boutons, instructions en ligne Tout ce qui n'est pas essentiel et qui aide lorsqu'on le demande.
En quoi est-ce différent de l'extension Tooltips ?
L'élément est un widget libre, autonome avec son propre déclencheur Le Extension ToolTIPS fait partie de Pro et joint une info-bulle à un widget, une section ou un conteneur qui se trouve déjà sur la page Les deux ont Follow Cursor, des préréglages de placement et des déclencheurs de survol ou de clic Besoin d'un nouveau point d'indication ? Utiliser l'élément Besoin d'info-bulles sur les choses déjà sur la page ? Utiliser l'extension.
Puis-je styliser les états normaux et de vol stationnaire séparément ?
Oui. L'onglet Style dispose de commandes normales et de survol indépendantes pour l'arrière-plan, le texte, les bordures, le rayon et l'ombre.
Comment contrôler où la bulle apparaît ?
Utilisez les préréglages Placement (variantes haut, bas, gauche, droite, plus début et fin), puis poussez un coup de pouce avec les décalages X et Y en pixels.
Survolez ou cliquez : quel déclencheur dois-je utiliser ?
Survolez pour des conseils rapides sur le bureau ; cliquez pour tout ce qui doit fonctionner sur les écrans tactiles, car le survol n'existe pas sur mobile.
Est-ce que ça va ralentir mon site ?
Non. Il charge uniquement ses propres petits CSS et JS lorsqu'ils sont présents sur la page. Une poignée de info-bulles par page n’a aucun impact notable.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
![Modules principaux Extension de duplicateur de messages/pages pour le lien de ligne Elementor : MA Duplicator dans la liste des pages WordPress créant une ébauche de page de destination - [Dupliqué n° 128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicateur de messages/pages
