Infobulle
L’infobulle (ou bulle d’aide, aide contextuelle) est un élément d’indication permettant d’afficher un contenu complémentaire lié à un élément précis de l’interface.
Elle est cachée par défaut et s’affiche par-dessus le reste de la page lors du survol ou au clic de l’élément associé.
- Un texte simple, sans formatage riche — Obligatoire
- Un cadre — Obligatoire
- Une flèche pointant vers l’élément associé — Obligatoire
- Une zone de déclenchement, sous forme de bouton tertiaire sans contour avec icône, dans le cas d’un déclenchement au clic — Obligatoire
Variations
L’infobulle compte deux variations, suivant le type de déclenchement.
Déclenchement au clic (ou information contextuelle)
- Privilégier cette variation si le contexte le permet.
- Adosser l’icône représentant le point d’interrogation et permettant de déclencher l’infobulle à l’élément auquel elle se rapporte.
Déclenchement au survol (ou au focus)
- Réserver son usage aux cas où il n’est pas possible d’afficher l’information autrement ou qu’il n’y a pas la place d’intégrer une zone de déclenchement, et aux parcours majoritairement en desktop car elle ne s’affiche pas en mobile.
Tailles
La taille de l’infobulle s’adapte à son contenu.
États
L’infobulle n’est sujette à aucun changement d’état.
Personnalisation
L’infobulle n'est pas personnalisable.
À faire
Ne pas personnaliser la couleur de fond de l’infobulle.
À ne pas faire
Ne pas personnaliser l’icône de l’infobulle.