Certains détails ne méritent pas un paragraphe entier sur la page Une courte note qui apparaît sur le vol stationnaire fait le travail, comme un contexte supplémentaire sur une carte de fonctionnalité ou une étiquette sur un bouton uniquement icône. Elementor n'a aucun moyen intégré de le faire, donc le Info-bulle extension dans Modules complémentaires principaux pour Elementor ajoute un à l'onglet Avancé de chaque élément.
Vous écrivez le texte de l'infobulle, choisissez où il apparaît et comment il s'anime, puis le stylisez comme n'importe quelle autre partie de votre conception Pas de shortcode et pas de CSS.
Ce que fait l'extension Tooltip #
Une fois activé, chaque élément Élémenteur obtient un Info-bulle section sous le Avancé onglet. Allumez-le pour un élément, tapez le texte, et les visiteurs voient une petite bulle quand ils survolent cet élément sur la page en direct Chaque élément porte sa propre infobulle, donc trois cartes d'affilée peuvent chacune s'expliquer avec un texte différent.
L'extension se divise en deux sous-onglets : Paramètres pour le comportement (texte, placement, animation, déclencheur, timing) et Style pour looks (couleurs, largeur, rembourrage, typographie).
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? Suivez le guide d'installation d'abord.
- Tooltips est une extension gratuite, donc aucune licence Pro n'est requise.
Comment activer l'extension Tooltip #
Depuis votre tableau de bord WordPress, rendez-vous sur Additions maîtres et ouvrez le Extensions onglet. Les info-bulles se trouvent dans le Widgets dynamiques groupe avec un badge Populaire, à côté de Balises dynamiques et Wrapper Link Cliquez sur sa bascule pour qu'elle devienne violette, puis frappez Enregistrer Modifications en haut et attendez l'avis de” enregistré avec succès par les“Settings vertes.
Ajouter une infobulle à un élément #
Ouvrez votre page avec Elementor et sélectionnez l'élément Dans l'exemple vidéo, il s'agit d'une carte Info Box dans une ligne de fonctionnalités à trois colonnes Accédez au Avancé onglet, ouvrez le Info-bulle section avec le badge MA violet, et retournez le Info-bulle passez à Oui. La sous-onglet Paramètres s'ouvre en premier.
Paramètres expliqués #
- Contenu: le texte de l'info-bulle Tapez-le ou utilisez le lien Écrire avec l'IA si vous souhaitez un point de départ.
- Placement : de quel côté de l'élément la bulle préfère : en haut (la valeur par défaut), en bas, à gauche ou à droite.
- Suivre le curseur : fait suivre la souris à l'infobulle au lieu de rester assis.
- Animation: comment la bulle entre Sept choix : Aucun, Fade, Shift-Away, Shift-Toward, Scale, Perspective, et Fill Effect.
- Déclencheur : ce qui ouvre l'info-bulle, survolez par défaut.
- Durée et délai de sortie : la vitesse d'animation en millisecondes et combien de temps la bulle persiste avant de se fermer.
- Décalage X et Y : éloignez la bulle de son point par défaut.
- Flèche et Flèche Type : ajoutez le petit pointeur reliant la bulle à l'élément, net ou rond.
Stylez l'infobulle #
Passer au Style sous-onglet pour que la bulle corresponde à votre conception au lieu de ressembler à un navigateur par défaut.
- Largeur maximale : caps la largeur de la bulle, 200 px dans la démo, si long texte wraps au lieu de s'étirer sur l'écran.
- Texte, arrière-plan et couleur de flèche : contrôle de couleur complet, y compris le pointeur.
- Rembourrage, type de bordure et rayon de bordure : la forme de la bulle.
- Alignement du texte, ombre de boîte et typographie : terminez le look avec votre propre police et votre propre profondeur.
Le résultat sur la page #
Enregistrer et afficher la page Survolez la carte et l'info-bulle s'efface avec le texte que vous avez écrit, en utilisant l'animation, les couleurs et la largeur que vous définissez Éloignez le curseur et il se ferme après le délai.
Répétez pour les autres éléments de la page Dans la démo, chacune des trois cartes de fonctionnalités reçoit son propre texte d'infobulle, écrit une fois dans le panneau et servi à chaque survol.
Où les infobulles gagnent leur vie #
- Cartes caractéristiques. Une phrase de détail supplémentaire sans allongement de la carte.
- Tables de tarification. Expliquez ce que couvre réellement le support de priorité des“, là où les gens se demandent.
- Boutons et icônes. Étiquette uniquement les commandes par icône pour que personne ne devine.
- Membres de l'équipe. Un fait amusant ou une note de rôle sur le survol de chaque photo.
- Termes techniques. De courtes définitions sur le jargon, moins cher qu'une page de glossaire.
Tutoriel Vidéo #
Préférez le voir en direct ? cette vidéo passe en revue en activant l'extension, en écrivant l'info-bulle et en coiffant la bulle.
Foire aux questions #
Comment ajouter une infobulle dans Elementor ?
Activez l'extension Tooltips dans l'onglet Extensions des addons principaux, puis sélectionnez n'importe quel élément dans l'éditeur Elementor, ouvrez l'onglet Avancé et activez le commutateur Tooltip. Tapez votre texte dans la zone Contenu, choisissez un placement et une animation, et l'infobulle s'affiche en vol stationnaire.
Puis-je ajouter une infobulle à n'importe quel widget Elementor ?
Oui. La section Tooltip apparaît sur l'onglet Avancé de chaque élément : widgets, colonnes, conteneurs et sections Chaque élément conserve son propre texte et ses propres paramètres d'infobulle, de sorte que différentes cartes sur la même page peuvent dire des choses différentes.
Puis-je styliser l'info-bulle pour qu'elle corresponde à mon site ?
Oui. La sous-onglet Style contrôle la largeur maximale, la couleur du texte, la couleur de l'arrière-plan, la couleur des flèches, le remplissage, la bordure, le rayon de la bordure, l'alignement du texte, l'ombre de la boîte et la typographie. La bulle peut correspondre à votre marque au lieu de ressembler à un navigateur par défaut.
Quelles animations l'infobulle prend-elle en charge ?
Sept options : Aucune, Fade, Shift-Away, Shift-Toward, Scale, Perspective, et Fill Effect Vous contrôlez également la durée de l'animation en millisecondes et le délai avant la fermeture de l'info-bulle après le départ du curseur.
L'extension Tooltip est-elle gratuite ?
Oui. Tooltips est livré avec la version gratuite de Master Addons for Elementor, dans le groupe Dynamic Widgets de l'onglet Extensions. Le page de tarification affiche ce que les plans Pro ajoutent au-delà des extensions gratuites.
Envelopper #
L'extension Tooltip pour Elementor met une petite note de survol stylisable sur tout ce que vous construisez : activez le commutateur dans l'onglet Avancé, écrivez le texte, choisissez le placement et l'animation, et stylisez la bulle une fois. Il se lit comme une partie de votre conception, et non comme un reste de navigateur. Pour des mises à niveau plus avancées de l'onglet, parcourez le Widgets et extensions Master Addons(ou voir le) Extension Glassmorphism pour un autre effet d'un seul basculeur.
