Communications numériques gouvernementales Beta

Système de design gouvernemental

Infobulle

L’infobulle est utilisée pour fournir des informations contextuelles liées à un élément particulier. Lorsque l'utilisateur clique sur l'élément, l’infobulle apparaît en haut, en bas, à gauche ou à droite de celui-ci. Une infobulle comprend une flèche pointant vers l'emplacement d'où elle a émergé.

Exemple


Quand l'utiliser

Les utilisateurs ne devraient pas avoir besoin de consulter ou de mémoriser une infobulle pour terminer leur tâche. L’infobulle fournit des informations complémentaires ou des précisions . Par exemple, le champ « courriel » pourrait être accompagné d’une infobulle qui explique pourquoi ce champ est demandé.

N'utilisez pas les infobulles pour les informations essentielles à la réalisation d'une tâche. Par exemple, les exigences pour sélectionner un mot de passe ne devraient pas figurer dans une infobulle, mais plutôt sous le libellé du champ.

Comment l'utiliser

Elle s’utilise toujours avec un bouton ⓘ ou (?) qui permet d’afficher l’infobulle en le cliquant.

Positionnez l’infobulle de manière à ne pas cacher le contenu qui y est associé.

L’information contenue dans l’infobulle doit être succincte.

S’il n’est pas possible de réduire l’information contenue dans l’infobulle, il est permis d’utiliser le défilement vertical à l’intérieur même de la composante. Cette alternative doit cependant être utilisée avec parcimonie.

Sur les appareils mobiles, l’infobulle prend un aspect visuel différent afin d’être plus accessible, mais son comportement demeure le même (voir l’exemple plus bas). 

 Le contenu de l’infobulle est flexible et peut être présenté de plusieurs façons:

  • Texte court seulement
  • Titre et texte court
  • Titre et texte court incluant un lien
  • Texte court incluant un lien

Informations techniques

Bouton

Le bouton a une dimension de 16 px.

Un dégagement doit être préservé autour du bouton pour conserver une zone cliquable de 40 px.

Dimension et dégagement

L’espace entre le bouton et la flèche est de 4 px. 

Dans le contenu de l'infobulle, il faut prévoir un dégagement de 16 px à gauche, 24 px à droite, 24 px en haut et 16 px en bas.

La largeur minimale de l’infobulle est de 216 px, et sa largeur maximale, de 320 px.
Sa hauteur maximale est de 160 px.

L’infobulle permet le défilement vertical lorsque le contenu prend plus d’espace que la hauteur maximale prévue.

À faire



À ne pas faire



Fermeture de l’infobulle

L’infobulle peut être fermée en cliquant sur le bouton, sur l’icône de fermeture ou en cliquant en dehors de la zone de contenu active.

Position du bouton

Lorsque l’infobulle accompagne un champ de formulaire, elle doit être placée à la fin de son étiquette en respectant le dégagement prévu.

À faire



À ne pas faire



Feuille dans le format mobile

Dans le format mobile, une feuille apparaît en bas de l’écran lorsque l’utilisateur clique sur le bouton de l’infobulle. Elle prend toute la largeur de l’écran et sa hauteur maximale doit correspondre au tiers de l’écran.

Exemple


État

Exemple


CSS du contenu de l'infobulle
Font-family : Open Sans
Font-size : 0.75 rem

Dernière mise à jour : 5 novembre 2020