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.
Qu'est-ce que tu peux en faire ?
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 ou cliquez pour des notes persistantes, ce qui fonctionne mieux sur les écrans tactiles Ajoutez une animation d'entrée, contrôlez la durée et masquez le retard afin que les info-bulles se sentent fluides au lieu de se tordre.
- 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 boîte à outils): vous avez besoin d'un nouvel indice déposé sur la page Il apporte son propre texte de déclenchement ou icône.
Extension Tooltips : vous avez déjà un bouton, une image ou un cap et souhaitez y attacher une info-bulle, y compris le mode Suivre le curseur.
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 l'ajouter ?
- 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.
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 autonome avec son propre déclencheur Le extension attache une info-bulle à n'importe quel widget, section ou conteneur existant, et ajoute le mode Suivre le curseur Besoin d'un nouveau point d'indication : utilisez l'élément Besoin de info-bulles sur les choses déjà sur la page : utilisez 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
Duplicateur de messages/pages
