Comment afficher des info-bulles sur WordPress ?

Elles sont si pratiques ces info-bulles, qui s’affichent au survol d’un mot. Elles permettent sans avoir à le demander, d’avoir des informations complémentaires. Qu’il s’agisse de définitions, façon glossaire interactif, ou encore des suggestions. 

Mais c’est quoi une info-bulle au juste ? Quand l’afficher et comment ? Est-ce que cela nécessite de coder ? Et s’agissant de WordPress, est-ce compliqué à mettre en place ou peut-on le faire avec une extension ? 

Voici un début de réponse sur YesWeBlog aujourd’hui ! 

Une info-bulle c’est quoi ? 

Une info-bulle, c’est cette petite bulle qu’on peut voir apparaître un peu partout sur internet, quand on survole avec son curseur, une image, un lien ou tout autre élément pour lequel le webmaster souhaite apporter une définition ou un complément d’information. Prenons l’exemple très courant de Wikipédia, quand on survole un lien : 

Les différents types d’info-bulles et le rôle qu’on peut leur confier 

Une info-bulle peut être toute simple, avec comme dans la capture ci-dessus, une tranche de texte. Mais selon les besoins et souhaits du propriétaire de site internet ou blog, elle peut aussi contenir une image/photo ainsi qu’un ou plusieurs liens. Sur la même page Wikipédia que pour la capture précédente, voici le cas d’une info-bulle avec photo et texte : 

Bref, vous l’aurez compris, l’info-bulle est un outil parfait quand on souhaite proposer du bonus informatif à ses visiteurs et lecteurs. Qu’on souhaite se contenter d’afficher de l’information uniquement textuelle ou qu’on souhaite ajouter à son texte, une photographie ou une image. Ainsi que pourquoi pas, un appel à l’action avec un lien pour compléter l’information communiquée. 

Le type d’info-bulle dépend généralement de la mission qu’on souhaite confier à ses info-bulles. Si on souhaite simplement communiquer une définition ou précision au survol d’un mot, une phrase ou deux suffisent généralement à préciser son propos. L’info-bulle avec texte et image intervient souvent quand justement, il convient d’imager son propos. L’exemple d’une vignette avec photo d’une carte géographique pour situer une ville est courant. Tout comme les captures d’écran de sites internet sont fréquentes, afin de donner un aperçu de l’espace vers lequel un internaute est susceptible de se rendre si on lui suggère un lien dans une info-bulle. 

Info-Bulle et navigation sur smartphone et tablette 

Si vous êtes adeptes de la navigation sur PC ou Mac, peut être que vous n’aurez pas remarqué que la plupart des info-bulles sont proposées et surtout, actives, uniquement sur grand écran et équipements pour lesquels on utilise une souris ou un touchpad. Dans tous les cas, quand l’écran n’est pas tactile ou utilisé avec cette fonction.

Ce qui est assez logique puisque sur écran non tactile avec navigation au touchpad ou souris, c’est au survol du curseur que la plupart des info-bulles se montreront. Tandis que sur écran tactile, souvent les info-bulles sont remplacées par des liens classiques ou ne sont tout simplement pas actives. Ce qui est par exemple le cas pour Wikipédia, pour conserver le même exemple que précédemment. En effet sur Wikipédia, sur PC vous aurez des info-bulles sur la page consultée. Tandis que pour la même page visitée avec un iPhone ou autre smartphone/téléphone, les info-bulles seront remplacées par des liens. 

Ajouter des infos-bulles sur WordPress avec une extension 

Il y a environ trois ans, j’ai travaillé au montage d’un site intranet ayant vocation à permettre de trouver facilement des informations techniques. Dans tout univers technique, l’utilisation d’acronymes est courant, presque trop. Or, il est parfois difficile de pouvoir tout retenir ! C’est là que l’idée d’utiliser une extension proposant des info-bulles sur cet intranet tournant avec WordPress, s’est rapidement imposée. 

Après tests de divers plugins WP d’info-bulles, celui qui a remporté la palme était CM Tooltip Glossary. D’autres faisaient très bien le job, mais c’est ce dernier qui a été retenu. Vous pourrez d’ailleurs assez facilement trouver de nombreuses autres extensions du même type en tapant « Tooltip » dans votre barre de recherche d’extensions sur le catalogue/repository officiel. 

Voici donc une rapide description de ce que permet le plugin. Une description beaucoup plus détaillée arrivera dans l’été avec un article dédié. 

CM Tooltip Glossary Plugin info-bulle WordPress 

En bref, au moment où je rédige cet article, le plugin CM Tooltip Glossary WordPress, c’est pas moins de 10 000 installations actives avec une mise à jour datant d’il y a deux jours. Il est à noter que le plugin est en grande partie gratuit mais dispose d’une partie premium payante. Pour ce qui est de l’usage des info-bulles, il peut parfaitement être utilisé gratuitement. C’est l’usage que j’en ai, par ailleurs. 

Parmi les fonctionnalités proposées, vous aurez donc les info-bulles, mais également une page « Glossaire » que vous serez libre d’utiliser ou non. Pour ma part, je ne compte pas utiliser cette page, mais c’est un complément non négligeable pour un site d’information ou par exemple, de formation. 

Il est donc relativement simple d’ajouter des info-bulles à son site WordPress, sans y passer la nuit, sans savoir coder ni forcément mettre la main au porte-monnaie ! 

Si vous avez besoin d’un site WordPress qui affiche des infos bulles contactez-moi ;)

:)

Donc à très vite pour la publication détaillée portant sur CM Tooltip Glossary ! 

Bonne semaine ! 

GG