Tooltip

Les info-bulles affichent des informations supplémentaires lors d'un survol. Les informations doivent être contextuelles, utiles et non essentielles.

Description

Les info-bulles affichent des informations supplémentaires lors d'un survol. Les informations doivent être contextuelles, utiles et non essentielles.

Le tooltip apparaît au survol de la souris et disparaît lors du départ de la souris. L'info-bulle ne prend pas en charge d'actions supplémentaires.

Plateformes

Anatomie

  1. Bulle : zone contenant le texte
  2. Icône : zone de survol, affichant la contenu

Usage

Quand l'utiliser ?

  • Informations utiles et non critiques. Utilisez des info-bulles pour renforcer un message existant.

  • Renforcer la confiance. Utilisez des info-bulles pour augmenter la certitude d'une interaction.

  • Brèves descriptions. Les info-bulles fonctionnent mieux avec un texte d'aide succinct.

  • Manque d'espace. Les info-bulles sont utiles en dernier recours pour l'interface utilisateur à espace restreint. 

Do's and don'ts

  • Do

    Communiquer des informations secondaires pour aider l’utilisateur.

  • Don't

    Il est interdit d’utiliser le tooltip pour communiquer des informations cruciales

  • Do

    Rester clair mais succinct dans vos messages. 

  • Don't

    Il est interdit d’écrire trop de contenu. Si votre message nécessite plus de 2 ou 3 phrases, considérez un autre composant / design.

Anatomie

  1. Bulle : zone contenant le texte
  2. Icône : zone de survol, affichant la contenu

Usage

Quand l'utiliser ?

  • Informations utiles et non critiques. Utilisez des info-bulles pour renforcer un message existant.

  • Renforcer la confiance. Utilisez des info-bulles pour augmenter la certitude d'une interaction.

  • Brèves descriptions. Les info-bulles fonctionnent mieux avec un texte d'aide succinct.

  • Manque d'espace. Les info-bulles sont utiles en dernier recours pour l'interface utilisateur à espace restreint. 

Do's and don'ts

  • Do

    Communiquer des informations secondaires pour aider l’utilisateur.

  • Don't

    Il est interdit d’utiliser le tooltip pour communiquer des informations cruciales

  • Do

    Rester clair mais succinct dans vos messages. 

  • Don't

    Il est interdit d’écrire trop de contenu. Si votre message nécessite plus de 2 ou 3 phrases, considérez un autre composant / design.

Des questions ou un feedback ?

N’hésitez pas à contacter la team Design System par mail.