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 pointe visant vers l’emplacement d’où elle a émergé.
Exemple
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
Variantes disponibles
Deux variantes sont disponibles selon le type d’information à présenter :
- Pour une définition
- Pour une précision sur un champ
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é.
Les infobulles s’utilisent principalement dans les formulaires. Dans les pages de contenu, on utilise plutôt la note de bas de page. Toutefois, certaines exceptions peuvent s’appliquer et l’infobulle peut se retrouver directement dans le contenu d’une page, par exemple pour préciser la prononciation d’un mot.
Quand ne pas l’utiliser
Il ne faut pas utiliser 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.
Dans le format bureau, si le contenu prévu pour l’infobulle est trop long, c’est le composant feuille qui devrait être utilisé.
Anatomie
- Mot souligné (lorsqu’il s’agit d’une définition)
- Icône d’infobulle
- Boîte de contenu texte
- Pointe
- Titre
Facultatif - Lien hypertexte
Facultatif - Bouton de fermeture
- Barre de défilement
Exceptionnelle
Contenus
Information détaillée sur les éléments spécifiques présents dans l’interface, y compris des explications sur leur fonctionnement et leur utilisation optimale.
Icône d’infobulle
L’infobulle s’utilise toujours avec un bouton ⓘ ou (?) qui permet d’afficher l’infobulle en le cliquant.
Boîte de contenu texte
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 du composant. Cette option doit cependant être utilisée avec parcimonie.
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
Spécifications
Cette section présente des informations techniques sur la composition, les comportements fonctionnels et les interactions du composant. Les spécifications techniques détaillées sont disponibles dans la trousse de design.
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
Icône d’infobulle
Positionnement et alignement : Lorsque l’infobulle accompagne un champ de formulaire, son bouton doit être placé à la fin du libellé du champ en respectant l’espacement prévu. L’icône ne doit pas être placée de part et d’autre du champ ou ailleurs dans le composant.
Boîte de contenu texte
Positionnement et alignement : L’infobulle est positionnée de manière à ne pas cacher le contenu qui y est associé.
Dimensions : La largeur minimale de l’infobulle est de 216 px, et sa largeur maximale, de 320 px. Sa hauteur maximale est de 160 px.
Comportements
Description des interactions possibles avec les éléments du composant, y compris l’utilisation de la souris et du clavier pour naviguer et effectuer des actions.
Fonctionnel
Fonctionnalités principales et secondaires, ainsi que leur comportement et les actions qu’ils déclenchent.
Icône d’infobulle
L’infobulle s’ouvre au clic sur l’icône ou sur un mot souligné accompagné d’une icône.
Boîte de contenu texte
L’infobulle permet le défilement vertical lorsque le contenu prend plus d’espace que la hauteur maximale prévue.
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.
Une barre de défilement peut apparaître si le contenu est trop long, mais uniquement dans des cas exceptionnels.
Interaction
Assistance sur la manière d’interagir avec le composant, que ce soit via la souris ou le clavier.
Souris
Instructions sur l’interaction avec le composant via la souris :
- Cliquer sur le mot souligné accompagné d’une icône ou l’icône pour ouvrir l’infobulle.
- Cliquer sur le bouton de fermeture ou à l’extérieur pour fermer l’infobulle.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Naviguer avec la touche Tab pour atteindre le mot souligné accompagné d’une icône ou l’icône.
- Appuyer sur Entrée ou Espace pour ouvrir l’infobulle.
- Appuyer sur Échap pour fermer l’infobulle.
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 15 janvier 2026