Ajouter Des Tooltips Dans Vos page et Articles

Ajouter des tooltips (infobulles interactives) dans vos articles et pages WordPress est un excellent moyen d’enrichir l’expérience utilisateur, d’apporter des précisions sans alourdir le texte, et d’optimiser vos contenus pour le référencement sémantique. Voici comment faire, étape par étape, avec ou sans extension.

 Méthode 1 : Utiliser une extension WordPress dédiée (recommandé)

 Extension : WordPress Tooltips (gratuite)

Étapes d’installation :

  1. Allez dans le Tableau de bord WordPress > Extensions > Ajouter.

  2. Recherchez « WordPress Tooltips ».

  3. Cliquez sur Installer, puis Activer.

Configuration :

  • Une fois activée, rendez-vous dans Réglages > Tooltips.

  • Vous pouvez personnaliser :

    • L’apparence de l’infobulle (couleurs, bordures, polices)

    • Le comportement (clic, survol, animation)

    • L’emplacement (automatique ou manuel)

Utilisation :

  • Dans vos articles ou pages, entourez le mot à tooltip ainsi :

 
<span class="tooltips" data-tooltips="Texte de l’infobulle">Mot à expliquer</span>

Par exemple :

 
<span class="tooltips" data-tooltips="HyperText Markup Language">HTML</span>

 Méthode 2 : Ajouter manuellement du HTML/CSS (sans plugin)

Si vous ne souhaitez pas utiliser de plugin, vous pouvez le faire à la main.

Exemple de code HTML + CSS :

 
<style> .tooltip { position: relative; cursor: help; } .tooltip:hover::after { content: attr(data-tip); position: absolute; background: #222; color: #fff; padding: 6px 10px; border-radius: 5px; top: 120%; left: 0; white-space: nowrap; z-index: 999; font-size: 0.9rem; } </style> <p>Maîtriser le <span class="tooltip" data-tip="HyperText Markup Language">HTML</span> est essentiel pour personnaliser son site.</p>

Collez ce code dans un bloc HTML personnalisé dans l’éditeur WordPress (ou dans un widget HTML si c’est en sidebar/footer).

 Bonnes pratiques SEO avec les tooltips

  • Utilisez les tooltips pour expliquer les acronymes ou termes techniques (bon pour le référencement sémantique).

  • Intégrez des mots-clés secondaires dans les infobulles.

  • Ne surchargez pas la page (pas plus de 5-6 tooltips par section).

  • Préférez des tooltips accessibles (cliquables ou lisibles au clavier).

 Extensions alternatives intéressantes

  • Tippy.js Tooltip – Léger, moderne, personnalisable.

  • Advanced Custom Fields + JS Tooltip – Pour les développeurs souhaitant des tooltips dynamiques.

  • Shortcodes Ultimate – Propose un shortcode [tooltip] simple à utiliser.

 

Chapitre Précédent
Retour à la/au Leçon
Chapitre Suivant