Extension d'info-bulle Elementor - Ajoutez des info-bulles à n'importe quoi
Tooltips est une extension Pro. Elle ajoute un panneau Tooltip à chaque widget, conteneur, colonne et section Elementor Sélectionnez quelque chose qui se trouve déjà sur votre page, écrivez le message, choisissez un placement et stylisez-le pour correspondre à votre site Si vous voulez un nouvel indice sur un endroit vide à la place, utilisez le autonome Widget info-bulle(, qui vient avec le plugin gratuit).
Ce que vous pouvez faire avec l'extension Tooltips
Positionnement et comportement interactif
Placez la bulle en haut, en bas, à gauche ou à droite de n'importe quel élément Déclenchez en survolant ou cliquez Ajoutez une animation d'entrée (décoloration, échelle), une durée et un délai de masquage Ou activez Suivre le curseur pour que l'info-bulle se déplace avec la souris, ce qui fonctionne bien pour les cartes, les graphiques et les diagrammes.
- Épinglez les info-bulles de n'importe quel côté afin qu'elles ne couvrent jamais le contenu qu'elles expliquent.
- Follow Cursor transforme les images et les diagrammes en surfaces explorables et étiquetées.
- Les contrôles d'animation et de synchronisation donnent à chaque infobulle une impression native de l'interface.
Personnalisation visuelle
Remplacez les valeurs par défaut du navigateur par des info-bulles que vous concevez vous-même : couleurs du texte et de l'arrière-plan, remplissage, bordures, rayon de bordure, style et couleur des flèches, ombre de la boîte et contrôle complet de la typographie.
- Couleurs exactes de la marque pour l'arrière-plan, le texte et la flèche.
- Frontières, rayon et ombres qui correspondent au reste de votre système de conception.
- Contrôle de la famille, de la taille et du poids des polices pour une microcopie lisible.
Bout d'outils sur n'importe quel élément, avec un contenu dynamique
Il fonctionne sur les boutons, les icônes, les images, les titres, les conteneurs, les colonnes, les sections et tout ce que vous pouvez sélectionner dans l'éditeur Le champ de texte de l'info-bulle accepte les balises dynamiques Elementor, de sorte qu'un indice peut attirer des données en direct telles qu'un prix ou une date de publication.
- Allumez l'extension une fois et chaque élément obtient un panneau Tooltip Vous n'ajoutez jamais de widget séparé pour chaque indice.
- Chaque élément conserve sa propre infobulle, donc trois cartes d'affilée peuvent chacune dire quelque chose de différent.
- Les balises dynamiques gardent les indices à jour, par exemple les détails du produit en direct.
Extension ou Element : de laquelle avez-vous besoin ?
Cette page (Extension de conseils d'outils, Pro): le contenu existe déjà et vous souhaitez y joindre un indice Il fonctionne sur n'importe quel widget, colonne, section ou conteneur.
Élément tooltip (gratuit): vous avez besoin d'un nouvel indice sur la page, et le widget fournit son propre texte de déclenchement, icône ou image.
Cas d'utilisation courants
- Icônes et boutons : expliquez ce que fait un bouton d'icône uniquement avant le clic.
- Images et schémas : Suivez les étiquettes du curseur sur les cartes, les plans d'étage et les dessins techniques.
- Rubriques et termes : définissez le jargon en ligne sans notes de bas de page.
- Sections : Badges bêta ou “new” et conseils d'appel de fonctionnalités sur des blocs entiers.
- WooCommerce : billets d'expédition, de stock ou de variantes attachés au bouton d'achat.
Comment ajouter une infobulle à n'importe quel widget Elementor
- Sélectionnez n'importe quoi Cliquez sur un widget, une colonne, un conteneur ou une section dans Elementor et ouvrez son onglet Avancé pour trouver la section Tooltip.
- Écrire et placer Entrez le message, puis définissez le placement, le déclencheur (déverrouiller, cliquer ou personnalisé), l'animation, la durée et Suivez le curseur si vous en avez besoin.
- Stylez-le. Définissez les couleurs, la typographie, le remplissage, le rayon, la flèche et l'ombre, puis mettez à jour la page.
- Pour une procédure pas à pas avec des captures d'écran, lisez comment ajouter une infobulle dans Elementor.
Foire aux questions pour les info-bulles
En quoi est-ce différent du widget Tooltip ?
Les deux ont des préréglages de placement, des déclencheurs de survol ou de clic, des animations et un curseur de suivi La différence est l'endroit où vit l'infobulle L'extension en attache un au contenu qui se trouve déjà sur votre page et qui a besoin de Pro. Le Élément tooltip est un widget autonome gratuit avec son propre texte de déclenchement, icône ou image Bouton, icône ou section existante : utilisez l'extension Empty spot that needs a hint : utilisez l'élément.
Comment se comportent les infobulles sur mobile ?
Le survol n'existe pas sur les écrans tactiles, donc un clic agit comme déclencheur et un deuxième clic ailleurs rejette la bulle Gardez le texte de l'infobulle mobile court et préférez le déclencheur de clic pour les indices critiques.
Les info-bulles sont-elles bonnes pour le référencement et l'accessibilité ?
Le texte des info-bulles est dans le HTML, donc il est crawlable Mais ne mettez jamais les informations essentielles uniquement dans une info-bulle, car certains flux de lecteurs d'écran et de clavier peuvent le manquer Utilisez les info-bulles pour une aide supplémentaire et testez avec des outils d'accessibilité.
De nombreuses info-bulles vont-elles ralentir ma page ?
Chaque info-bulle ajoute une petite quantité de HTML et de CSS. L'utilisation typique, environ 5 à 10 par page, n'a pas d'impact notable Des dizaines de tooltips animés lourds sur une page peuvent s'additionner, alors gardez-les concis.
À quoi sert Follow Cursor ?
Visuels explorables : cartes, points chauds de produits, graphiques, diagrammes techniques La bulle suit le pointeur pour que chaque zone sous le curseur obtienne sa propre explication en direct.
Puis-je utiliser du contenu dynamique dans une info-bulle ?
Oui. Combinez avec des balises dynamiques pour injecter des données en direct telles que les prix, les noms ou les dates, afin que les indices restent à jour sans modifications manuelles.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
Duplicateur de messages/pages
