Vous avez vu des info-bulles partout Survolez une icône de barre d'outils dans Google Docs et une petite étiquette vous indique ce que fait ce bouton C'est une info-bulle Dans WordPress, les info-bulles vous permettent d'ajouter de courts indices qui apparaissent lorsque quelqu'un survole (ou clique) un élément de votre page Pas de page supplémentaire immobilier, pas de mise en page encombrée.
Master Addons for Elementor vous offre deux façons d'ajouter des info-bulles : le Élément Tooltip(en), un widget autonome que vous déposez sur la page, et le Extension Tooltip(en anglais), qui attache une infobulle à tout widget, section ou conteneur Elementor qui existe déjà Ce guide couvre les deux méthodes, quand utiliser chacune et comment les styliser.
Table des matières
Que sont les info-bulles et pourquoi comptent-elles ?
Une infobulle est un court message qui apparaît lorsqu'un visiteur survole son curseur sur un élément spécifique de votre page Sur les sites WordPress, les infobulles servent à quelques fins pratiques :
- Expliquez les termes sans rompre le flux. Si votre contenu utilise le jargon, une info-bulle permet aux lecteurs d'obtenir une définition rapide en vol stationnaire sans interrompre le paragraphe.
- Ajouter du contexte aux images et aux icônes. Lorsque vous affichez des icônes de produits, des photos de membres de l'équipe ou des icônes de fonctionnalités, une info-bulle fournit des détails supplémentaires sans occuper d'espace visuel.
- Gardez les pages propres. Au lieu d'entasser chaque élément d'information dans la disposition visible, les info-bulles cachent les détails secondaires jusqu'à ce que le lecteur les veuille réellement.
- Améliorer l'engagement. Les éléments interactifs comme les info-bulles encouragent les visiteurs à explorer votre contenu Les pages qui invitent à l'interaction ont tendance à retenir l'attention plus longtemps.
Ce dont vous aurez besoin
- WordPress installé sur votre site
- Modules complémentaires principaux pour Elementor installé et activé (la version gratuite fonctionne)
- Constructeur de pages Elementor (gratuit ou Pro)
Master Addons est un plugin WordPress avec Plus de 80 widgets et extensions pour Elementor, y compris les deux fonctionnalités de tooltip couvertes ici.
Élément d'info-bulle vs Extension d'info-bulle : lequel devriez-vous utiliser ?
Ils résolvent différents problèmes Le fait de choisir le bon permet de gagner du temps.
| Caractéristique | Élément Tooltip | Extension Tooltip |
|---|---|---|
| Ce que c'est | Un widget Elementor autonome | Une extension qui fonctionne sur n'importe quel widget |
| Fonctionne sur | Texte, images et icônes (dans le widget tooltip) | Tout conteneur, section ou élément d'élément |
| Meilleur pour | Création de blocs de contenu tooltip dédiés | Ajout d'info-bulles aux éléments de page existants |
| Comment accéder | Faites glisser et déposez depuis le panneau du widget Elementor | Activer à partir de l'onglet Avancé de n'importe quel widget |
| Types de contenu | Texte tooltip, image tooltip, icône tooltip | Tooltip basé sur du texte sur n'importe quel élément |
| Cas d'utilisation | Vous souhaitez construire une section spécialement conçue autour des info-bulles | Vous souhaitez ajouter une info-bulle rapide à un bouton, un titre, une image ou tout widget déjà présent sur votre page |
La version courte:
- Besoin d'ajouter une infobulle à un en-tête, un bouton ou tout widget déjà sur votre page ? Utilisez le Extension Tooltip.
- Besoin d'un bloc de contenu dédié où les utilisateurs survolent un texte, des images ou des icônes spécifiques pour voir le contenu de l'info-bulle ? Utilisez le Élément Tooltip.
Vous pouvez utiliser les deux sur la même page Ils n'entrent pas en conflit l'un avec l'autre.
Méthode 1 : comment ajouter une infobulle dans Elementor à l'aide de l'élément Tooltip
Le Élément Tooltip est un widget autonome Vous le faites glisser sur votre page et les utilisateurs survolent du texte, une image ou une icône pour révéler un message d'info-bulle.
Utilisez-le lorsque vous souhaitez créer des info-bulles d'images, des info-bulles de texte ou des info-bulles d'icônes en tant que section dédiée de votre page.
Étape 1 : ouvrez votre page dans Elementor
Depuis votre tableau de bord WordPress, accédez à la page que vous souhaitez modifier et cliquez Modifier avec Elementor.
Étape 2 : recherchez le widget Tooltip
Dans le panneau du widget Elementor sur le côté gauche, tapez“Tooltip” dans la barre de recherche Le MA Tooltip widget apparaît sous la section Addons principaux Faites-le glisser sur votre page où vous souhaitez que l'infobulle apparaisse.
Étape 3 : choisissez votre type de contenu
Cliquez sur le widget pour ouvrir ses paramètres Sous le Contenu tab, le Type de contenu option vous donne trois choix :
- Texte. Les visiteurs survolent votre texte pour voir le message tooltip.
- Image. Les visiteurs survolent une image pour voir l'info-bulle.
- Icône. Les visiteurs survolent une icône pour révéler des informations supplémentaires.
Choisissez le type de contenu qui correspond à votre cas d'utilisation.
Étape 4 : configurez le contenu de l'info-bulle
Après avoir choisi votre type de contenu, configurez les deux parties :
Le contenu du déclencheur (ce que les visiteurs voient sur la page) :
- Pour le texte : saisissez le mot ou la phrase sur laquelle les visiteurs survoleront
- Pour Image : téléchargez une image depuis votre Médiathèque WordPress
- Pour Icon : choisissez une icône dans la bibliothèque d'icônes
Le contenu de l'infobulle (ce qui apparaît en vol stationnaire):
- Aller à la Paramètres Tooltip section
- Entrez votre texte d'info-bulle dans l'éditeur intégré
- Vous pouvez formater le texte avec du gras, de l'italique, des liens, etc
Étape 5 : configurez la direction et la vitesse de l'info-bulle
Dans les paramètres de l'info-bulle, définissez l'apparence de l'info-bulle :
- Direction des infobulles. Choisissez où apparaît l'info-bulle par rapport à la gâchette : haut, bas, gauche ou droite.
- Vitesse de pointe d'outil. Réglez la vitesse d'animation en millisecondes Des valeurs plus faibles la font apparaître plus rapidement.
Conseil : Gardez la vitesse de la pointe de l'outil entre 300 et 500 m. Trop rapide semble brusque, trop lent ne répond pas.
Étape 6 : stylisez votre infobulle
Passer au Style onglet pour personnaliser l'apparence de votre widget d'infobulle Elementor :
- Contenu Largeur maximale. Contrôle la largeur de la boîte à info-bulles.
- Couleur d'arrière-plan. Définissez l'arrière-plan de l'infobulle.
- Texte Couleur. Modifiez la couleur de la police de l'infobulle.
- Typographie. Ajustez la famille de polices, la taille, le poids et l'espacement.
- Ombre de boîte. Ajoutez de la profondeur avec un effet d'ombre.
- Frontière. Ajoutez des bordures et définissez le rayon de la bordure pour les coins arrondis.
- Rembourrage. Contrôlez l'espace entre les bords du texte et de l'infobulle.
Vous pouvez définir différents styles pour le normal et planer états à ajouter un retour visuel.
En dessous des styles généraux, le Styles Tooltip section vous donne le contrôle sur la bulle elle-même Définissez la largeur de l'infobulle en pixels, choisissez les couleurs de l'arrière-plan et du texte, ajustez la typographie, configurez le remplissage sur les quatre côtés, choisissez un type de bordure, définissez le rayon de bordure pour les coins arrondis, contrôlez la distance entre la gâchette et la bulle, alignez le texte à l'intérieur de l'infobulle et ajoutez une ombre de boîte pour la profondeur.
Pour une visite complète de chaque paramètre, consultez le Documentation de l'élément Tooltip ou regardez le tutoriel vidéo.
Méthode 2 : comment ajouter une info-bulle à n'importe quel widget Elementor à l'aide de l'extension Tooltip
Le Extension Tooltip fonctionne différemment de l'élément Au lieu d'être un widget autonome, il ajoute un Info-bulle section à l'onglet Avancé de chaque élément Élémenteur Sélectionnez tout widget, conteneur, colonne ou section qui existe déjà sur votre page, retournez le commutateur, tapez votre texte et les visiteurs voient une petite bulle lorsqu'ils survolent cet élément Chaque élément porte sa propre infobulle, donc trois cartes d'une ligne 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).
Étape 1 : activez 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. 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.
Étape 2 : ouvrez votre page dans Elementor
Accédez à la page que vous souhaitez modifier et cliquez Modifier avec Elementor.
Étape 3 : sélectionnez n'importe quel élément
Cliquez sur n'importe quel élément existant dans lequel vous souhaitez ajouter une infobulle Cela fonctionne avec des titres, des boutons, des images, des icônes, des tableaux de prix, des conteneurs, des colonnes, des sections et n'importe quel widget Elementor ou élément Master Addons La section infobulle apparaît sur l'onglet Avancé de chaque élément.
Étape 4 : accédez à l'onglet Avancé et activez l'info-bulle
Avec votre élément sélectionné, cliquez sur le Avancé onglet dans le panneau des paramètres Faites défiler vers le bas jusqu'à ce que vous trouviez le Info-bulle section avec le badge MA violet Agrandissez-le et retournez le Info-bulle passez à Oui. La sous-onglet Paramètres s'ouvre en premier.
Étape 5 : configurez les paramètres de l'infobulle
La sous-onglet Paramètres vous donne le contrôle sur le comportement de l'info-bulle :
- 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 de la piste d'info-bulle la souris au lieu de rester immobile Utile pour les cartes, les graphiques et les diagrammes où chaque zone sous le curseur a besoin de sa propre étiquette.
- Animation: comment la bulle entre Sept choix : Aucun, Fade, Shift-Away, Shift-Toward, Scale, Perspective, et Fill Effect.
- Déclencheur : qu'est-ce qui ouvre l'info-bulle Survolez par défaut, ou cliquez pour obtenir des indices persistants adaptés à l'écran tactile.
- 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 d'un nombre spécifique de pixels.
- Flèche et Flèche Type : ajoutez le petit pointeur reliant la bulle à l'élément, avec des options de style nettes ou rondes.
Étape 6 : stylisez 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 si longue enveloppe le texte 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.
Étape 7 : vérifiez le résultat
Enregistrer et afficher la page Survolez l'élément et l'info-bulle s'efface avec le texte que vous avez écrit, en utilisant l'animation, les couleurs et la largeur que vous avez définies Éloignez le curseur et il se ferme après le délai Répétez pour les autres éléments de la page.
Pour tous les détails de configuration, voir le Documentation de l'extension Tooltip ou regardez le tutoriel vidéo.
Cas d'utilisation pratiques pour chaque méthode
Quand utiliser l'élément Tooltip
L'élément Tooltip est un bloc de contenu dédié Utilisez-le lorsque les info-bulles sont le point principal de la section :
- Pages de vitrine de fonctionnalités. Affichez les fonctionnalités du produit sous forme d'icônes ou d'images avec des descriptions d'infobulles.
- Sections glossaires. Créez un glossaire en ligne où les lecteurs survolent les termes pour voir les définitions.
- Articles de portefeuille. Ajoutez des info-bulles d'images aux vignettes du portfolio affichant les détails du projet.
- Pages d'équipe. Placez des icônes ou des photos avec des détails d'info-bulle sur les rôles d'équipe.
- Contenu éducatif. Laissez les élèves survoler les mots-clés pour voir les explications sans quitter la page.
Quand utiliser l'extension Tooltip
L'extension Tooltip ajoute du contexte aux éléments qui existent déjà sur votre page :
- 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é“, là où les gens se demandent Voir notre Widget de table de tarification pour plus.
- 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.
Combinant les deux méthodes
Vous pouvez utiliser les deux sur la même page Par exemple, utilisez l'élément Tooltip pour créer une section de comparaison de fonctionnalités où les visiteurs survolent les icônes pour en savoir plus sur chaque fonctionnalité, puis utilisez l'extension Tooltip sur votre bouton CTA en bas pour ajouter un essai de 14 jours d'“Free, aucune carte de crédit requise” tooltip.
Il n'y a pas de conflit entre les deux Ils servent des objectifs différents et peuvent coexister sur n'importe quelle page.
Meilleures pratiques Tooltip pour WordPress
- Gardez le texte de l'infobulle court. Visez 1-2 phrases Si vous avez besoin de plus que cela, les informations appartiennent probablement à la page elle-même, pas caché dans une infobulle.
- Utiliser un positionnement cohérent. Choisissez une direction (le haut ou le bas fonctionne mieux pour la plupart des cas) et collez-la sur votre site. Les positions de mélange semblent aléatoires.
- N'abusez pas des info-bulles. Si chaque élément de votre page a une infobulle, les visiteurs ne prendront pas la peine de survoler l'un d'entre eux Utilisez-les là où ils ajoutent véritablement de la valeur.
- Assurez-vous que les info-bulles fonctionnent sur mobile. Le survol n'existe pas sur les écrans tactiles L'extension Tooltip prend en charge les déclencheurs de clics, qui fonctionnent mieux pour les utilisateurs mobiles Testez vos info-bulles sur un téléphone avant de publier.
- Faites correspondre la conception de votre site. Personnalisez les couleurs, les polices et les bordures des infobulles pour qu'elles correspondent à votre thème existant Le style par défaut des infobulles peut sembler déplacé sur un site poli.
Élément d'info-bulle vs Extension d'info-bulle : comparaison rapide
| Caractéristique | Élément Tooltip | Extension Tooltip |
|---|---|---|
| Configuration | Faites glisser et déposez un nouveau widget | Activer sur n'importe quel widget existant's Advanced tab |
| Contenu déclencheur | Texte, images, icônes (intégrés dans le widget) | Tout élément Élémenteur : titres, boutons, images, sections, conteneurs |
| Meilleur pour | Blocs de contenu dédiés aux infobulles | Ajout d'info-bulles aux conceptions existantes |
| Animations | Fade, échelle, décalage | 7 options : Aucune, Fade, Shift-Away, Shift-Toward, Scale, Perspective, Fill Effect |
| Suivre Cursor | Non | Oui |
| Écrire avec IA | Non | Oui (pour le texte tooltip) |
| Personnalisation de la flèche | Non | Oui (aigu ou rond) |
| Personnalisation | Contrôle complet du style | Contrôle complet du style (sous-onglet Style) |
| Plusieurs info-bulles par page | Oui | Oui (chaque élément porte le sien) |
| Courbe d'apprentissage | Minimal | Minimal |
Les deux fonctionnalités sont disponibles dans Modules complémentaires principaux pour Elementor. Vous pouvez commencer par la version gratuite et passer à Pro pour des options de style avancées et des widgets supplémentaires.
Questions fréquemment posées
Comment ajouter une info-bulle dans WordPress sans plugin ?
Vous pouvez ajouter des info-bulles de base en utilisant HTML en ajoutant un title attribuer à n'importe quel élément (par exemple, <span title="Your tooltip text">Hover here</span>). Mais cette méthode offre un contrôle de style nul et semble différente selon les navigateurs. Pour les info-bulles personnalisées et stylisées dans WordPress, un plugin comme Master Addons vous donne un contrôle total sur la conception, l'animation et le positionnement.
Puis-je ajouter une infobulle à une image dans Elementor ?
Oui. Master Addons propose deux façons Utilisez l'élément Tooltip et sélectionnez“Image” comme type de contenu pour créer une info-bulle d'image dédiée Ou utilisez l'extension Tooltip sur n'importe quel widget Elementor Image pour ajouter une info-bulle à une image existante sur votre page.
Les infobulles fonctionnent-elles sur les appareils mobiles ?
Les info-bulles standard basées sur le survol ne fonctionnent pas sur les écrans tactiles puisqu'il n'y a pas de curseur à survoler L'extension Tooltip de Master Addons prend en charge une option de déclenchement par clic, qui affiche l'info-bulle lorsque les utilisateurs appuient sur l'élément sur mobile Cela rend vos info-bulles accessibles sur tous les appareils.
Quelle est la différence entre une infobulle et une popover ?
Une infobulle est un petit indice basé sur du texte qui apparaît en vol stationnaire et disparaît lorsque vous éloignez le curseur Une fenêtre contextuelle est généralement plus grande, peut contenir du contenu riche comme des images, des boutons ou des formulaires, et nécessite souvent un clic pour s'ouvrir et se fermer. L'élément Master Addons Tooltip peut inclure du texte formaté, ce qui le rend flexible à la fois pour les infobulles simples et pour le contenu de survol plus riche.
Les info-bulles sont-elles bonnes pour le référencement ?
Le contenu des info-bulles est rendu en HTML, de sorte que les moteurs de recherche peuvent explorer le texte à l'intérieur de ceux-ci Cependant, comme le contenu des info-bulles est caché par défaut et visible uniquement en vol stationnaire, les moteurs de recherche peuvent lui donner moins de poids. Ne cachez pas de contenu important dans les info-bulles Utilisez-les pour des informations supplémentaires qui ajoutent de la valeur à l'expérience utilisateur.
Puis-je utiliser à la fois Tooltip Element et Tooltip Extension sur la même page ?
Oui. Ils fonctionnent indépendamment et n'entrent pas en conflit les uns avec les autres. Utilisez l'élément Tooltip pour les blocs de contenu dédiés aux infobulles et l'extension Tooltip pour ajouter des infobulles rapides à n'importe quel widget Elementor existant sur la même page.
Commencez à ajouter des info-bulles à votre site WordPress
Avec Master Addons, vous obtenez deux options : le Élément Tooltip pour créer du contenu d'info-bulles dédié avec des déclencheurs de texte, d'image et d'icônes, et le Extension Tooltip pour ajouter des info-bulles à tout élément Elementor existant sur votre page.
Les deux méthodes fonctionnent dans la boîte Vous pouvez également consulter le Widget de point d'accès d'image si vous avez besoin d'info-bulles interactives épinglées à des endroits spécifiques d'une image.
Téléchargez les modules complémentaires principaux pour Elementor pour commencer.
