Qu'est-ce qu'une infobulle (tooltip) ? Définition, types et bonnes pratiques UI

Qu'est-ce qu'une infobulle ?

Une infobulle est un petit message contextuel rattaché à un élément précis d'une interface, un bouton, un champ de saisie, un élément de menu ou une icône, pour expliquer à quoi il sert ou inviter l'utilisateur à agir dessus. Son trait distinctif est l'ancrage : une infobulle pointe vers une partie réelle de l'interface au lieu de flotter au milieu de l'écran, si bien que l'explication se trouve juste à côté de ce qu'elle explique.

C'est cette proximité qui rend les infobulles si efficaces. Quand l'aide apparaît directement à côté de l'élément concerné, l'utilisateur n'a pas à traduire une consigne en un emplacement sur la page : l'infobulle l'a déjà fait pour lui. Elle répond à « qu'est-ce que c'est ? » ou « que dois-je faire ici ? » à l'endroit exact où la question se pose.

Les infobulles sont volontairement petites et peu engageantes. Contrairement à une modale, qui occupe l'écran et met tout en pause jusqu'à sa fermeture, une infobulle laisse le reste du produit visible et utilisable. C'est donc l'outil naturel du guidage léger et contextuel : mettre en avant une fonctionnalité, clarifier une commande peu familière ou orienter quelqu'un vers sa prochaine étape sans l'arracher à ce qu'il est en train de faire.

L'anatomie d'une infobulle : une flèche ancrée sur un élément réel, un titre et un message courts, un compteur d'étapes et un moyen clair de passer à la suite.

Que signifient les mots « infobulle » et « tooltip » ?

Le terme anglais « tooltip » vient des premiers logiciels graphiques. Quand vous survoliez avec le curseur une petite icône d'outil dans une barre d'outils (le pinceau, la gomme, l'outil de recadrage), une minuscule étiquette apparaissait pour nommer cet outil. C'était, littéralement, un « tip » (un conseil) sur le « tool » (l'outil) : d'où le nom tooltip.

En français, on parle d'« infobulle » (parfois écrit « info-bulle »), contraction d'« information » et de « bulle » : une petite bulle d'information qui apparaît à côté d'un élément. Les deux mots désignent la même chose, et vous croiserez souvent « tooltip » tel quel dans les équipes produit et la documentation technique.

Pendant des années, cette étiquette révélée au survol était tout le sens du mot. Mais à mesure que les logiciels sont passés sur le web et que les produits se sont complexifiés, le motif s'est étendu à une famille beaucoup plus large de petits messages ancrés. Aujourd'hui, une infobulle désigne tout message compact rattaché à un élément d'interface, qu'il soit déclenché au survol, au focus clavier, au clic ou affiché automatiquement comme une étape d'un parcours d'onboarding.

Ainsi, quand quelqu'un parle aujourd'hui d'infobulle ou de tooltip, il peut s'agir d'une étiquette de survol classique sur une icône, ou d'un message in-app guidé qui accompagne un nouvel utilisateur dans la découverte d'une fonctionnalité. L'idée de fond reste la même, une courte explication ancrée à un élément à l'écran, mais le déclencheur et l'intention se sont considérablement élargis.

Les types d'infobulles

Toutes les infobulles ne se comportent pas de la même façon. Ce qui change de l'une à l'autre, c'est la manière dont elle se déclenche, le niveau d'attention qu'elle exige et la mission qu'elle remplit. Voici les principaux types que vous rencontrerez.

1. Infobulle au survol

Le grand classique. L'utilisateur passe le curseur sur un élément et une petite étiquette apparaît ; il s'éloigne et elle disparaît. Les infobulles au survol sont parfaites pour nommer des boutons composés uniquement d'une icône ou proposer une précision facultative en une ligne. Leur point faible : le survol n'existe pas sur les écrans tactiles et peut passer complètement inaperçu. Elles ne doivent donc jamais contenir une information dont l'utilisateur a réellement besoin pour accomplir une tâche.

2. Infobulle au clic (ou au focus)

Au lieu d'apparaître au survol, cette infobulle s'ouvre lorsque l'utilisateur clique sur une cible, souvent une petite icône « ? » ou « i », et reste ouverte jusqu'à ce qu'il la ferme ou passe à autre chose. Comme elle est déclenchée volontairement, elle fonctionne sur les appareils tactiles et peut contenir un peu plus de texte. Elle convient bien à une aide du type « à quoi sert ce champ » à côté d'un champ de formulaire ou d'un paramètre.

3. Infobulle hotspot

Un hotspot est un petit point ou une balise qui pulse doucement à côté d'une fonctionnalité. Il ne dit rien par lui-même : il invite simplement au clic, et l'infobulle s'ouvre quand l'utilisateur interagit. C'est le motif le moins insistant : il attire l'œil par un mouvement subtil sans interrompre personne, ce qui le rend idéal pour un guidage facultatif à découvrir, comme une fonctionnalité tout juste lancée ou un raccourci pour utilisateurs avancés.

4. Infobulle d'onboarding guidé

Ces infobulles s'affichent automatiquement comme les étapes d'une séquence et accompagnent un nouvel utilisateur dans un workflow, un message ancré à la fois, souvent avec un compteur d'étapes (« 2 sur 5 ») et un bouton Suivant. L'infobulle devient alors un outil pédagogique plutôt qu'une simple étiquette passive, et elle constitue l'ossature de la plupart des product tours et des parcours d'onboarding utilisateur. Découvrez des designs réels dans nos exemples d'infobulles d'onboarding.

5. Infobulle masquée

Une infobulle masquée assombrit le reste de l'écran avec un calque semi-transparent et découpe un halo de lumière autour de l'élément ciblé. C'est le motif le plus accaparant qui soit (tout le reste s'efface, visuellement comme cognitivement), on le réserve donc à l'étape la plus critique d'un parcours, celle qui décide si un utilisateur s'active ou part (churn). Parce qu'il est si insistant, il faut l'utiliser avec parcimonie.

Infobulle, modale, popover ou hotspot ?

On confond souvent les infobulles avec d'autres motifs in-app qui s'affichent eux aussi par-dessus l'interface. Voici comment ils se comparent, pour choisir le bon selon la situation.

En bref : l'infobulle est la plus légère, petite, ancrée et non intrusive. Le popover est un cousin plus lourd qui accueille un contenu plus riche. La modale interrompt délibérément pour s'assurer que quelque chose est vu. Et le hotspot est en réalité un déclencheur qui révèle une infobulle à la demande. Choisir entre eux revient surtout à se demander quel niveau d'attention le moment mérite.

Bonnes pratiques UX pour les infobulles

Une infobulle est simple à ajouter et facile à mal utiliser. Voici les principes qui distinguent les infobulles vraiment utiles de celles que les utilisateurs apprennent à ignorer.

Ancrez-la à un élément réel, en contexte

La force d'une infobulle, c'est sa proximité avec ce qu'elle explique. Attachez-la toujours au bouton, au champ ou à l'icône précis qu'elle décrit ; ne la laissez jamais flotter au milieu de l'écran, là où l'utilisateur doit chercher ce à quoi elle fait référence.

Faites court

Une infobulle est une indication, pas un article d'aide. Une phrase claire vaut mieux qu'un paragraphe. Si vous vous surprenez à écrire trois lignes de texte, c'est le signe qu'il vous faut un popover, un message in-app plus riche ou un lien vers la documentation, pas une infobulle plus grande.

Ne cachez jamais une information essentielle derrière un survol

Les infobulles au survol ne fonctionnent pas sur les écrans tactiles et passent facilement inaperçues à la souris. Tout ce qu'un utilisateur doit savoir pour terminer une tâche a sa place dans l'interface elle-même ; réservez les infobulles à une aide réellement complémentaire.

Une seule à la fois

L'erreur la plus courante consiste à afficher toutes les indications d'un coup sur le premier écran. Un mur d'infobulles submerge l'utilisateur, se fait fermer par réflexe et lui apprend à ignorer votre guidage pour le reste de son parcours. Affichez une seule infobulle contextuelle à la fois, liée à l'endroit où se trouve réellement l'utilisateur.

Adaptez l'attention aux enjeux

Utilisez des motifs discrets (étiquettes au survol, hotspots) pour le guidage facultatif, et des motifs plus appuyés (étapes guidées, masques) uniquement pour les moments qui décident de l'activation. Quand chaque étape exige une attention maximale, aucune ne l'obtient.

Pensez à l'accessibilité

Une bonne infobulle est accessible au clavier (et pas seulement au survol), reste visible assez longtemps pour être lue, ne masque pas l'élément qu'elle décrit et conserve un contraste de couleurs suffisant pour rester lisible. Les utilisateurs de lecteurs d'écran doivent recevoir la même information grâce à des attributs ARIA appropriés. Des infobulles accessibles ne sont pas seulement conformes : elles sont plus claires pour tout le monde.

Comment ajouter des infobulles sans code avec Kompassify

Traditionnellement, ajouter des infobulles impliquait de demander à un développeur d'intégrer une bibliothèque, de coder le texte en dur et de redéployer à chaque fois que vous vouliez changer un mot. C'est lent, et cela place votre guidage in-app derrière le backlog de l'équipe technique. Ce n'est pas une fatalité.

Kompassify est une plateforme d'onboarding utilisateur no-code qui permet aux équipes produit, onboarding et customer success de créer et publier des infobulles sans toucher au code. Vous installez une seule fois un snippet JavaScript, puis tout se gère depuis le tableau de bord Kompassify :

• Ancrez en quelques clics. Sélectionnez n'importe quel élément de votre produit en production et attachez-y une infobulle, sans écrire de sélecteurs CSS à la main.
• Choisissez le déclencheur et le style. Survol, clic, balise hotspot, étape guidée ou halo masqué, avec vos propres couleurs et vos propres textes.
• Enchaînez-les en parcours. Reliez vos infobulles pour former un walkthrough produit complet, segmenté par type d'utilisateur.
• Mesurez et itérez. Suivez les performances de chaque infobulle et de chaque parcours, puis testez en A/B le texte et le ciblage, le tout sans redéploiement.

Comme rien n'est codé en dur, vous pouvez modifier le texte d'une infobulle, la déplacer vers un autre élément ou la désactiver complètement en quelques secondes, et elle contribue au type de guidage contextuel qui fait progresser l'activation des utilisateurs et la découverte des fonctionnalités. Kompassify est conforme au RGPD et hébergé dans l'UE, et il est gratuit jusqu'à 100 utilisateurs actifs mensuels : vous pouvez donc lancer vos premières infobulles sans rien dépenser.

Questions fréquentes