Comment lier ou associer un tooltip WordPress à un élément donné — WordPress Tooltips

Utilisateurs du plugin WordPress Tooltip, j’espère que ce message vous trouvera en bonne santé et que vous passerez une bonne journée avec votre famille Nous avons reçu un ticket de support de la part d’un utilisateur du plugin wordpress tooltip, dans lequel l’utilisateur du tooltip disait :

Toutes mes excuses, je suis un débutant. Je n’arrive toujours pas à comprendre comment lier ou associer une infobulle à un élément donné. J’ai donc créé une infobulle et je veux qu’elle apparaisse lorsque l’utilisateur survole un bouton (avec l’étiquette « Add person » et id= « add-person ») sur ma page. Comment dois-je procéder ? En d’autres termes, comment associer l’infobulle que je viens de créer à ce bouton ?

Nous pensons qu’un plus grand nombre d’utilisateurs pourraient avoir une question comparable. C’est pourquoi nous avons l’intention de diffuser ouvertement notre réponse à tous les utilisateurs de WordPress Tooltip.

Quel est le but des infobulles ?

Les infobulles sont des fenêtres contextuelles compactes qui fournissent des informations supplémentaires telles que des vidéos, des audios, des images, des cartes Google, des codes QR, des articles de Wikipédia et du texte. Lorsque les utilisateurs survolent un élément de vos pages web, comme un mot dans un article, une zone de saisie d’un formulaire de recherche, une image ou un widget dans la barre latérale, des infobulles apparaissent de manière transparente pour offrir des détails intéressants. Le plugin WordPress Tooltip permet d’appliquer des effets d’infobulle à n’importe quel élément des articles WordPress, des menus, des commentaires, des formulaires de contact, des produits WooCommerce, des forums bbPress, des activités BuddyPress, et bien plus encore. Ce plugin dispose d’un ensemble de composants et d’addons captivants, y compris la délicieuse fonction Bullets Screen .

Présentation du plugin WordPress Tooltip

WordPress Tooltip Pro est un plugin spécialement conçu pour améliorer votre site web WordPress avec des infobulles visuellement attrayantes et polyvalentes. Il vous permet de créer des styles d’infobulles captivants qui présentent magnifiquement le contenu à vos utilisateurs, tout en optimisant l’espace de l’écran.

Lorsqu’un utilisateur survole un élément, une infobulle animée s’affiche. Vous avez la possibilité d’intégrer diverses formes de contenu, notamment des vidéos, des audios, des images et même du contenu généré par des tiers à partir de plugins tels que des codes QR, des publicités Amazon et des cartes Google. Tout cela peut être ajouté sans effort via l’éditeur standard de WordPress, ce qui le rend incroyablement convivial.

Acheter maintenant

 

En tant que novice, apprenez le processus de création de vos premières infobulles en utilisant le plugin WordPress Tooltips Pro.

WordPress Tooltip facilite la création d’infobulles sans effort. Nous allons vous guider pas à pas dans le processus d’ajout d’infobulles.
Connectez-vous à votre compte sur le site web de WordPress Tooltip Plugin.
Si vous n’avez pas encore installé le plugin WordPress Tooltip, veuillez vous connecter à votre compte sur le site web du plugin WordPress Glossary Tooltip. Si vous avez déjà installé le plugin WordPress Tooltip, vous pouvez passer directement à l’étape 10.
Cherchez le lien « Télécharger » dans la barre de menu supérieure ou cliquez simplement sur ce lien : [lien vers le plugin WordPress Glossary Tooltip] pour télécharger le plugin WordPress Tooltips Pro.
Accédez à la zone d’administration de votre site WordPress et connectez-vous.
Naviguez jusqu’à l’élément de menu « Plugins ».
Désactivez la version précédente du plugin d’infobulles.
Supprimez l’ancien plugin WordPress Tooltip.
Dans l’élément de menu « Plugins », cliquez sur « Ajouter nouveau » en haut du panneau des plugins.
Téléchargez le fichier zip du plugin d’infobulles que vous avez téléchargé sur le site web du plugin de glossaire WordPress.
Activez la dernière version du plugin WordPress Tooltip Pro.
Accédez à la barre latérale de l’administration de WordPress. Cliquez sur « Tooltips » et ensuite sur « Add New » pour lancer l’ajout d’une nouvelle infobulle WordPress.

add new wordpress tooltip

Add new wordpress tooltip
Dans l’éditeur de texte des articles WordPress, vous avez la liberté d’incorporer divers éléments HTML dans l’infobulle. Ces éléments peuvent être des images, des liens ou du texte.

Add new wordpress toolip

Félicitations ! Vous avez maintenant réussi à inclure une infobulle WordPress. Lorsque vous survolez le mot-clé désigné, l’infobulle se déclenche. De plus, notre plugin WordPress tooltip offre une multitude d’options de personnalisation pour améliorer l’apparence de vos infobulles. Ces options comprennent des paramètres tels que la couleur du texte, l’arrière-plan, la taille de la police, la largeur, l’ombre, l’opacité, la méthode de déclenchement, et plus encore.

Comment lier ou associer une info-bulle wordpress à un élément donné ?

1. Veuillez créer un nouveau terme d’infobulle wordpress, dans le tableau de bord wordpress, vous pouvez cliquer sur l’élément de sous-menu « Ajouter un nouveau » pour ouvrir le créateur d’infobulles. L’interface ressemblera à l’éditeur d’infobulles illustré ci-dessous :

tooltips editor

éditeur d’infobulles

2. Dans le diagramme ci-dessus, vous remarquerez une métabox intitulée « Tooltips for Forms » (infobulles pour les formulaires). En réalité, elle devrait s’intituler « Infobulles pour les classes ». Nous avons effectué cette modification car nous avons observé que les cas d’utilisation les plus courants impliquaient l’ajout d’infobulles à des éléments de formulaire ou à des champs à l’aide de classes ou d’identifiants CSS. Cette modification a pour but d’aider les utilisateurs à comprendre l’utilité de la métabox en tant qu’info-bulles pour les formulaires.

3. Saisissez simplement la classe CSS ou l’ID CSS dans le champ de saisie « Tooltip for Forms » à l’endroit où vous souhaitez appliquer l’effet d’infobulle :

Par exemple, info-bulles pour la classe :
.input_box_1
ou info-bulles pour l’ID :
#text_box_2

Si vous ne savez pas comment trouver la classe CSS ou l’ID CSS d’un composant spécifique dans WordPress, veuillez vous référer au guide intitulé « Comment trouver la classe CSS ou l’ID CSS d’un composant dans une page WordPress ».

4. Assurez-vous d’avoir saisi le titre et le contenu de l’infobulle dans l’éditeur d’infobulles, puis cliquez sur le bouton « Publier ».

5. Sur le frontend, lorsque vous visitez une page qui contient la classe CSS ou l’ID CSS spécifiée, le survol de l’élément de classe déclenchera l’affichage du contenu de l’infobulle dans une fenêtre d’infobulle.

 

6. Ici pour vérifier les infobulles pour les classes DEMO , vous pouvez voir une démonstration des infobulles wordpress pour les classes. Dans le formulaire, lorsque vous survolez chaque champ, une fenêtre d’infobulle dédiée apparaît. De cette manière, vous pouvez ajouter des infobulles pour différentes classes CSS ou ID sur le frontend. Par exemple, vous pouvez avoir des infobulles pour les formulaires de contact, les images, les vidéos, les boutons, les éléments de menu, les cartes, le texte, et plus encore.

7. Veuillez noter que dans l’éditeur d’infobulles, vous pouvez personnaliser des styles d’infobulles uniques et visuellement attrayants pour chaque terme d’infobulle. En outre, vous pouvez appliquer des animations différentes pour chaque info-bulle.

Conclusion :

L’utilisateur des infobulles WordPress peut ajouter des infobulles à des éléments spécifiques de son site web WordPress, tels que des champs de formulaire, des étiquettes de formulaire, des éléments de menu, des boutons ou tout autre élément interactif. En liant ou en associant des infobulles à ces éléments, ils peuvent fournir des informations supplémentaires, des instructions ou des clarifications aux utilisateurs lorsqu’ils interagissent avec ces éléments. Par exemple, dans un champ de formulaire, une bulle d’aide peut être ajoutée :

Dans un champ de formulaire, une infobulle peut donner des indications sur le format attendu ou fournir une brève description de la saisie requise.
Dans une étiquette de formulaire, une info-bulle peut fournir des explications ou des exemples supplémentaires sur l’objectif de l’étiquette.
Dans un élément de menu, une info-bulle peut offrir une brève description ou indiquer la fonctionnalité de l’élément lorsqu’il est survolé. La demande de fonctionnalité de l’utilisateur vise à améliorer l’expérience de l’utilisateur en réduisant l’ambiguïté, en fournissant des conseils utiles ou en donnant aux utilisateurs plus d’informations sur des éléments spécifiques. Cela peut permettre d’améliorer la convivialité et la compréhension des fonctionnalités du site web ou des exigences en matière de saisie.
…etc

La fonctionnalité « Tooltips for anything » – peut améliorer l’expérience de l’utilisateur en réduisant l’ambiguïté, en fournissant des indications utiles ou en donnant aux utilisateurs plus d’informations sur des éléments spécifiques. Cela peut améliorer la convivialité et la compréhension des fonctionnalités du site web ou des exigences en matière de saisie.

 

Tagged with: , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*