Info-bulle
Affichez des définitions et du contexte au survol. Définissez des termes, expliquez des acronymes ou créez des liens vers du contenu connexe sans encombrer la page.
Ajoutez du texte au survol pour définir des termes, expliquer des acronymes ou créer des liens vers des pages connexes sans encombrer le contenu principal.
Utilisez les info-bulles lorsque :
- Vous définissez des termes en ligne sans interrompre la lecture
- Vous expliquez des acronymes que certains lecteurs pourraient ne pas connaître
- Vous fournissez du contexte utile mais non essentiel
- Vous créez des liens vers du contenu connexe avec un appel à l'action
Info-bulle de base
Survolez APIA set of protocols for software applications to communicate. pour voir la définition.
<Tooltip tip="A set of protocols for software applications to communicate.">
API
</Tooltip>Avec titre
Ajoutez un titre au-dessus du texte de l'info-bulle :
Survolez APIAPIApplication Programming Interface: a set of protocols for software applications to communicate. pour voir la définition avec un titre.
<Tooltip
headline="API"
tip="Application Programming Interface: a set of protocols for software applications to communicate."
>
API
</Tooltip>Avec lien d'appel à l'action
Incluez un lien pour permettre aux utilisateurs d'en savoir plus :
Découvrez les APIAPIApplication Programming Interface: a set of protocols for software applications to communicate.Learn more → dans notre documentation.
<Tooltip
headline="API"
tip="Application Programming Interface: a set of protocols..."
cta="Learn more"
href="/components/overview"
>
API
</Tooltip>Utilisation en ligne
Les info-bulles fonctionnent en ligne avec le texte. Vous pouvez expliquer les termes HTMLHyperText Markup Language, CSSCascading Style Sheets ou JSJavaScript en ligne.
Explain <Tooltip tip="HyperText Markup Language">HTML</Tooltip>,
<Tooltip tip="Cascading Style Sheets">CSS</Tooltip>, or
<Tooltip tip="JavaScript">JS</Tooltip> terms inline.Info-bulles vs autres composants
| Besoin | Composant |
|---|---|
| Définir un terme en ligne | Info-bulle |
| Expliquer un concept en détail | Expandable ou section séparée |
| Avertir de quelque chose d'important | Callout (Note, Warning) |
| Afficher du code contextuel | CodeGroup ou code en ligne |
Règle générale : Les info-bulles sont faites pour les définitions rapides (1-2 phrases). Les explications plus longues appartiennent au contenu principal ou à un Expandable.
Props
Le texte de l'info-bulle affiché au survol.
Texte affiché au-dessus de l'info-bulle.
Texte du lien d'appel à l'action.
URL pour l'appel à l'action (requis avec cta).
Le texte qui déclenche l'info-bulle.
Accessibilité
- Les info-bulles sont accessibles au clavier (Tab pour se concentrer, s'affiche au focus)
- Utilise
role="tooltip"pour les lecteurs d'écran - Le texte déclencheur a un soulignement en pointillés pour indiquer l'interactivité