Parfois, un design a besoin d'une courte explication sans lui donner une ligne complète sur la page C'est le travail d'une infobulle : une petite bulle qui apparaît en vol stationnaire, dit sa pièce, et s'écarte du Widget info-bulle dans Modules complémentaires principaux pour Elementor attache cette bulle à une icône, un morceau de texte ou une image, avec contrôle sur le placement, l'animation, le déclencheur et le style.
Ce guide parcourt le widget depuis le premier glisser jusqu'à une info-bulle stylisée sur la page en direct.
Ce que fait le widget Tooltip #
Le widget place un petit élément cible sur votre page, une icône, un texte ou une image, et y lie une bulle d'info-bulle Lorsque les visiteurs planent ou cliquent sur la cible, la bulle apparaît avec votre message Le placement, l'animation, le timing et les décalages sont tous configurables, et l'onglet Style couvre à la fois la cible et la bulle.
Il s'agit d'un widget autonome : la cible et son infobulle sont tout le point Si vous voulez ajouter des info-bulles aux widgets que vous avez déjà sur la page, Master Addons expédie également une extension Tooltip qui se fixe à n'importe quel élément Elementor Le widget est le bon choix lorsque la cible tooltip est son propre petit élément de conception, comme une icône info à côté d'un prix ou un avatar d'équipe avec une bulle de nom.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
- Le widget Tooltip activé dans le panneau d'options Master Addons, sous Widgets de base.
Comment ajouter le widget Tooltip #
Dans l'éditeur Elementor, recherchez le Éléments panneau pour Info-bulle et faites glisser le widget sur votre page Il se charge avec une icône d'info comme cible par défaut et une info-bulle d'espace réservé déjà câblée, donc le survol de l'icône sur le canevas montre la bulle tout de suite.
Choisissez le type de contenu : icône, texte ou image #
Ouvrir Paramètres de contenu dans l'onglet Contenu. Le Type de contenu switcher au sommet propose trois cibles :
- Icône: choisissez n'importe quelle icône dans la bibliothèque Elementor. Le cercle d'informations classique est la valeur par défaut.
- Texte: tapez un mot ou une phrase, comme “Hover Me !”, et l'info-bulle s'y attache.
- Image: choisissez une image dans la médiathèque, utile pour les avatars et les vignettes de produits.
Deux contrôles s'appliquent à chaque type. Alignement place la cible à gauche, au centre ou à droite. Balise HTML enveloppe la cible dans le balisage que vous choisissez : H1 à H6, div, span, p, bouton ou a. Coller avec p ou span pour des info-bulles simples ; utilisez le bouton lorsque la cible doit agir comme un contrôle d'accessibilité.
Avec Texte sélectionné, un champ Contenu remplace le sélecteur d'icônes :
Avec Image sélectionnée, la médiathèque s'ouvre et l'image choisie devient la cible de survol :
Écrivez l'infobulle et définissez son comportement #
Le Options de pointe d'outil section contrôle la bulle elle-même.
- Texte de la info-bulle : le message à l'intérieur de la bulle Gardez-le à une ligne ou deux ; les info-bulles sont pour les indices, pas les paragraphes.
- Suivre le curseur : laissez la bulle suivre la souris au lieu de rester épinglée sur la cible.
- Placement : où la bulle se trouve par rapport à la cible Top est la valeur par défaut, avec Top Start, Bottom, et les autres bords disponibles.
- Animation: comment la bulle entre, Shift-Away par défaut.
- Déclencher : Le survol montre la bulle sur la souris ; Le clic attend un robinet, ce qui fonctionne également mieux sur les écrans tactiles.
- Durée et délai de sortie : vitesse d'animation et combien de temps la bulle persiste après le départ du curseur, les deux 300 millisecondes par défaut Les valeurs par défaut semblent correctes pour la plupart des pages ; ne les ralentissez que si l'infobulle porte quelque chose que les visiteurs ont besoin d'un rythme plus long pour lire.
Le Décalage X et Décalage Y les curseurs éloignent la bulle de son point par défaut. Utile lorsque l’info-bulle doit franchir une bordure ou s’asseoir à côté d’une cible de forme étrange.
Style la cible #
Dans le Style onglet, Styles généraux couvre l'élément cible sur la page.
- Largeur du contenu et remplissage : la taille du bloc cible La démo l'élargit de 150 à 215 pixels pour donner la salle d'avatar.
- États normaux et en vol stationnaire : Couleur d'arrière-plan, couleur du texte, ombre de boîte et typographie pour chaque état.
- Type de frontière et rayon de frontière : encadrez la cible ; un rayon de 4 pixels maintient les coins doux.
Stylez la bulle tooltip #
Le Styles Tooltip la section stylise la bulle et la toile la prévisualise en direct pendant que vous travaillez.
- Largeur de l'info-bulle : la largeur maximale de la bulle, 200 pixels par défaut Le texte s'enroule à l'intérieur de celle-ci.
- Couleur d'arrière-plan et couleur du texte : la démo devient bleu marine foncé avec du texte blanc, le look classique à haute contraste.
- Typographie, Rembourrage, Bordure : le texte et le cadre de la bulle.
- Distance: l'écart entre bulle et cible, 10 pixels par défaut.
- Alignement du texte et ombre de boîte : les dernières touches Une ombre douce aide la bulle à lire comme flottant au-dessus de la page.
Le résultat sur la page #
Sur la page en direct, la cible reste assise tranquillement jusqu'à ce qu'un visiteur la survole. Ensuite, la bulle s'anime à l'emplacement choisi, tient pendant que le curseur reste et disparaît après le délai que vous avez défini.
Cas d'utilisation courants #
- Icônes d'info outre les lignes de tarification, les étiquettes de formulaire et les listes de fonctionnalités.
- Avatars d'équipe cela révèle un nom et un rôle en vol stationnaire.
- Termes glossaires en texte, avec une courte définition dans la bulle.
- Vignettes produits avec une spécification ou une note qui ne mérite pas d'espace page.
- Boutons icônes uniquement où l'info-bulle nomme l'action.
Conseils pour de meilleures info-bulles #
- Gardez le texte court. Une ou deux lignes Si le message a besoin de plus, il appartient à la mise en page, pas à une infobulle.
- Utilisez le déclencheur Click pour toucher les visiteurs. Le vol stationnaire n'existe pas sur les téléphones ; une info-bulle déclenchée par clic fonctionne partout.
- Attention au contraste. Bulle sombre, texte clair ou l'inverse La largeur par défaut de 200 pixels avec 10 compléments se lit bien aux tailles de police typiques.
- Vérifiez le placement près des bords de l'écran. Une info-bulle supérieure sur le premier élément d'une page peut se couper ; passez-le en bas ou utilisez les décalages.
- Ne cachez pas les informations critiques dans les info-bulles. Tout ce que les visiteurs doivent lire appartient à la page ; la bulle est pour les extras.
Tutoriel Vidéo #
Si vous préférez regarder l'info-bulle en action, cette courte vidéo couvre toute la configuration, du glisser le widget vers la bulle stylisée sur la page en direct.
Foire aux questions #
Qu'est-ce que le widget Tooltip dans Master Addons ?
Il s'agit d'un widget Elementor qui place une icône, un texte ou une image sur la page et y attache une bulle d'info-bulle La bulle apparaît en vol stationnaire ou en clic, et vous contrôlez son placement, son animation, son timing, ses décalages et son style complet à partir du panneau Elementor.
La cible tooltip peut-elle être une image ?
Oui. Définissez le type de contenu sur Image dans les paramètres de contenu et choisissez n'importe quelle image dans la bibliothèque multimédia. L'info-bulle apparaît ensuite lorsque les visiteurs survolent ou cliquent sur l'image, ce qui convient aux avatars de l'équipe et aux vignettes des produits.
Puis-je afficher l'info-bulle en cliquant au lieu de planer ?
Oui. Dans Options d'info-bulle, changez Déclencher de Hover à Click Le déclenchement de clic se comporte également mieux sur les téléphones et les tablettes, où le vol stationnaire n'existe pas.
Comment puis-je changer l'endroit où l'infobulle apparaît ?
Utilisez la liste déroulante Placement dans Options d'info-bulle pour choisir Haut, Bas ou une variante de début ou de fin de chaque arête Les curseurs X Offset et Y Offset affinent ensuite la position exacte, et Distance définit l'écart par rapport à la cible.
Puis-je coiffer la bulle d'info-bulle ?
Oui. La section Styles de l'info-bulle dans l'onglet Style contrôle la largeur, la couleur d'arrière-plan, la couleur du texte, la typographie, le remplissage, la bordure, la distance par rapport à la cible, l'alignement du texte et l'ombre de la boîte de l'éditeur. Les aperçus des modifications en direct.
Envelopper #
Le widget Tooltip gère l'ensemble du motif de bulle d'indice en un seul endroit : choisissez une icône, un texte ou une cible d'image, écrivez le message, définissez le déclencheur et le placement et stylisez les deux moitiés du panneau Élémenteur. Parcourir l'ensemble complet de Widgets et extensions Master Addons pour l'extension Tooltip et tout le reste dans la boîte, et voir le page de tarification pour ce que Pro ajoute.
