Dernière mise à jour : 4 août 2025
Une infobulle est une fenêtre d’aide contextuelle qui, au clic, présente à l’utilisateur un contenu complémentaire à l’information affichée sur la page.
- Guide d'utilisation
- Design
Utilisation
L’infobulle est utile lorsque l'on veut réduire la quantité de contenu sur une page, en rendant facultative la consultation de contenu complémentaire. Elle est appelée à l’aide de l’icône spécifiquement prévue à cet effet, placée à la droite du contenu pour lequel une information complémentaire ou une définition est requise.
Infobulle sur un surtitre
Infobulle sur l’étiquette d'un champ de saisie
Infobulle dans un corps de texte
Pour clairement identifier dans le paragraphe les mots auxquels l'infobulle est rattachée, ceux-ci seront soulignés d’un trait dont le style est réservé à cet usage.
Quand utiliser l’infobulle
Utiliser l’infobulle pour afficher une information complémentaire dont la consultation est facultative.
Aucune information essentielle, critique à la réalisation d’une tâche ou à la compréhension globale d’un contenu ne doit se trouver dans l’infobulle :
- Pas d’appel à l’action (à l’exception de l’icône « X » de fermeture).
- Pas d’options.
- Pas d’information hors contexte.
Quand envisager autre chose
Dans un formulaire, il est préférable d’afficher sous le champ de saisie le texte d’aide persistant, plutôt que dans une infobulle.
Rédaction UX
Le contenu de l’infobulle doit être bref et concis.
- Ne pas surcharger d’information l’infobulle ou y présenter un contenu trop long. Ainsi, le nombre de caractères permis, espaces incluses, est de 280 caractères maximum.
- Ne pas surutiliser l’infobulle : Il ne devrait pas y avoir plus de trois infobulles par page, sauf exceptions approuvées.
Anatomie
Couleur et styles
Deux couleurs permises pour l’infobulle, selon qu’elle apparaît sur un arrière‑plan blanc ou foncé :
Taille
La taille de l’infobulle varie en fonction du contenu qu’elle contient, dans le respect de la marge normée de 16px entre le contenu et le contour de l’infobulle.
Largeur minimale
Si le contenu de l’infobulle est très court (un ou deux mots), la largeur de l'infobulle s'adapte au contenu, tout en conservant la marge normée de 16px.
Largeur maximale
La largeur de l’infobulle s’adapte à celle de l’écran, jusqu’à un maximum de 320px dans la grille de petite taille.
Placement
- L’infobulle apparaît en haut ou en bas du contenu auquel elle réfère.
- Le chevron de l’infobulle qui pointe vers le contenu doit être positionné le plus près possible du texte auquel il réfère, mais sans jamais le cacher.
Interactivité
Ouvrir l’infobulle
La zone interactive, représentée ici par un i dans un cercle, doit être assez grande avec un placement aéré pour être activée avec le doigt, mais assez discrète pour s'insérer dans un texte.
À noter que l’icône et le lien, ainsi que tous leurs états, sont normés dans la trousse de design (UI kit).
Fermer l’infobulle
Utiliser le bouton à utilisation spécifique « Fermer ».
