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


    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é.

    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.

    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. 

    Exemple


    Comment l'utiliser

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

    L’infobulle est positionnée 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 option doit cependant être utilisée avec parcimonie.

    Dans le format bureau, si le contenu prévu pour l'infobulle est trop long, c'est la composante feuille qui devrait être utilisée. Cependant, la forme employée pour la composante doit rester la même dans l’ensemble du site. 

    Dans le format mobile, l'infobulle s'affiche sous forme de feuille pour permettre un accès plus facile à l’information.

    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

    Fond et ombrage

    Le fond est blanc et a un contour de 1 px de couleur #C5CAD2. L'ombrage derrière le fond de l'infobulle correspond à l'Élévation 2.

    Bouton

    Le bouton a une dimension de 16 px. Un espace doit être réservé autour du bouton pour conserver une zone cliquable de 40 px.

    Dimensions

    L’espacement 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, 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 la composante.

    À faire



    À ne pas faire



    Exemple

    CSS du contenu de l'infobulle
    font-family: Open Sans;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(34, 54, 84, 0.24);

    Dernière mise à jour : 30 août 2023

    Évaluation de page

    L’information sur cette page vous a-t-elle été utile?
    Avis général

    Des questions ou besoin de renseignements?

    Communiquez avec Services Québec