Qu’est-ce qu’un Tooltip ?

Un tooltip est une petite fenêtre contextuelle ou boîte d’information qui apparaît lorsque vous survolez votre souris sur un élément spécifique d’une page web. Ces tooltips sont souvent utilisés pour fournir des informations supplémentaires, des explications ou un contexte sur l’élément survolé.

Qu’est-ce que le plugin de tooltip WordPress ?

Le plugin de tooltip WordPress est un plugin de tooltips pour WordPress, conçu pour vous aider à créer des styles de tooltip colorés, variés et élégants pour présenter du contenu à vos utilisateurs. Il offre des effets d’animation vivants et élégants tout en économisant de l’espace précieux sur votre écran.

Lorsque les utilisateurs survolent un élément, la boîte d’info-bulle colorée s’affiche avec un effet d’animation. Vous pouvez ajouter des vidéos, de l’audio, des images, et même d’autres contenus générés par des plugins WordPress tiers tels que des codes QR, des annonces Amazon, ou des cartes Google, dans la boîte d’info-bulle via l’éditeur standard de WordPress. C’est très facile à utiliser.

Qu’est-ce que le Z-Index ?

La propriété z-index en CSS contrôle l’ordre de superposition des éléments sur une page web. Lorsque plusieurs éléments se chevauchent, le z-index détermine lequel apparaît devant les autres. Plus la valeur du z-index est élevée, plus l’élément se trouve en haut de l’ordre de superposition.

Pourquoi personnaliser le Z-Index dans le plugin de tooltip WordPress ?

Certains utilisateurs du plugin de tooltip WordPress nous ont informés que leur thème WordPress a une valeur de Z-Index très élevée. Ainsi, lorsque les utilisateurs survolent un terme de tooltip dans les articles WordPress, ils ne peuvent pas trouver la boîte d’info-bulle WordPress. Après avoir vérifié le site de cet utilisateur de tooltip WordPress, nous avons constaté que si l’info-bulle apparaît derrière d’autres éléments, elle peut être obscurcie, ce qui rend difficile, voire impossible, la lecture du contenu de l’info-bulle pour les utilisateurs.

Un autre exemple est un ticket que nous avons reçu d’un utilisateur du plugin de tooltip WordPress, dans lequel il disait :

Bonjour à l’équipe de support, je vous suis reconnaissant pour votre réponse rapide. J’aime beaucoup le plugin et j’envisage de l’acheter dès que j’arriverai à faire fonctionner la version gratuite.
1. Le problème est visible sur chaque page du site web.
2. Problème : comme vous pouvez le constater dans l’exemple d’URL ci-dessus, l’info-bulle ne s’affiche pas lorsque vous survolez ou cliquez sur les mots-clés soulignés d’une ligne pointillée.

De plus, j’ai configuré le glossaire correspondant sur seekinward.net/glossary, qui semble fonctionner correctement. Merci de me faire savoir si vous avez besoin d’informations supplémentaires.

Merci encore infiniment pour votre réponse rapide. J’ai bon espoir de faire fonctionner cela.

Nous avons vérifié attentivement son site et avons constaté qu’il y a un plugin qui règle le Z-Index à -1 sur son site WordPress, ce qui empêche la fenêtre d’info-bulle WordPress de s’afficher dans ses articles WordPress.

L’ajustement du z-index permet de garantir que l’info-bulle s’affiche de manière bien visible et ne soit pas masquée par le contenu environnant. C’est pourquoi nous avons ajouté une option “Valeur de Z-Index personnalisée pour l’info-bulle” pour les utilisateurs du plugin de tooltip WordPress 🙂

Comment personnaliser le z-index dans le plugin de tooltip WordPress ?

1 : Si vous utilisez le plugin WordPress Tooltips Pro, veuillez cliquer sur télécharger le plugin de tooltip WordPress pour obtenir la dernière version du plugin WordPress Tooltip Pro +. Si vous êtes un utilisateur de la version gratuite de WordPress Tooltip, veuillez télécharger le plugin WordPress Tooltip à partir de la bibliothèque WordPress.

2 : Téléchargez le plugin WordPress Tooltip (fichier zip) via le panneau des plugins de votre site WordPress. Si vous êtes un nouvel utilisateur de WordPress Tooltip, veuillez consulter notre Vidéo tutoriel WordPress Tooltips 3 : Comment télécharger et activer le plugin WordPress Tooltip Pro.

3 : Connectez-vous à votre site WordPress en tant qu’administrateur. Dans le tableau de bord de WordPress, cliquez sur l’élément de menu Tooltips, puis sur le sous-menu “Paramètres globaux”. Vous ouvrirez le panneau de paramètres globaux de WordPress. Nous avons inclus une capture d’écran pour les utilisateurs. Bien qu’elle provienne du plugin WordPress Tooltip Pro, l’option “Valeur de z-index personnalisée pour l’info-bulle” est la même dans le plugin gratuit WordPress Tooltip. Elle ressemble à ceci :

Global Settings in WordPress Tooltips Free Version 9.0.3 by tooltips.org

Comme vous pouvez le constater, à l’intérieur du panneau “Valeur de z-index personnalisée pour l’info-bulle”, vous pouvez faire glisser le curseur de couleur pour ajuster la valeur du Z-INDEX. Par exemple, si le paramètre de z-index de votre thème est de 10 000, vous pouvez définir le z-index de la fenêtre d’info-bulle WordPress à 15 000. Ensuite, il vous suffit de cliquer sur le bouton bleu “Mettre à jour maintenant”. Sur la page frontale, lorsque les utilisateurs survolent le terme d’info-bulle, la fenêtre d’info-bulle s’affichera.

Conclusion :

Dans le plugin de tooltip WordPress, la nécessité d’ajuster le z-index pour la fenêtre d’info-bulle vise généralement à garantir que l’info-bulle s’affiche au-dessus des autres éléments de la page, tels que le texte, les images ou d’autres éléments d’interface utilisateur. Voici quelques raisons pour lesquelles cela peut être nécessaire :

1. Éviter les Chevauchements de Contenu : Si l’info-bulle apparaît derrière d’autres éléments, elle peut être obscurcie, rendant difficile, voire impossible, la lecture du contenu de l’info-bulle. L’ajustement du z-index garantit que l’info-bulle est affichée de manière bien visible et ne reste pas cachée par le contenu environnant.
2. Design et Esthétique : Les concepteurs web utilisent souvent le z-index pour contrôler la hiérarchie visuelle des éléments sur une page web. En définissant un z-index spécifique pour l’info-bulle, le webmaster peut s’assurer qu’elle s’intègre au design global et à la mise en page du site.
3. Design Réactif : Dans le design web réactif, les éléments peuvent changer de position et de mise en page en fonction de la taille de l’écran et de l’orientation. L’ajustement du z-index de l’info-bulle peut aider à maintenir sa visibilité et sa position, en particulier sur les écrans plus petits ou lorsque les éléments se déplacent en raison des différentes orientations des appareils.
4. Personnalisation : Certains sites web peuvent avoir des mises en page complexes avec différentes couches d’éléments. La personnalisation du z-index permet au webmaster d’ajuster finement l’apparence et le comportement de l’info-bulle par rapport aux autres éléments de la page.

Pour définir le z-index d’une info-bulle dans un plugin WordPress, le webmaster fournira généralement une option ou un paramètre dans les paramètres du plugin. De cette manière, les utilisateurs du plugin peuvent ajuster la valeur du z-index selon leurs besoins spécifiques en matière de design et de mise en page.

Dans l’ensemble, la capacité de contrôler le z-index des info-bulles garantit qu’elles fonctionnent comme prévu, fournissant des informations utiles sans être obstruées par d’autres éléments de la page.

Nous avons inclus un lien vers ce document sur les info-bulles WordPress avec l’option de valeur de z-index personnalisée. Vous pouvez trouver ce lien vers le document dans la version gratuite de WordPress Tooltip 9.0.7, la version Pro de WordPress Tooltips 18.0.6, et la version Pro Plus de WordPress Tooltips 24.2.8.