Composants
Composants
Les composants sont les éléments réutilisables du Design System, conçus pour composer des interfaces cohérentes et accessibles.
Tooltips
Aide contextuelle courte, attachée à un élément d’interface.
Aperçu
Le tooltip reprend le modèle fourni : une surface sombre, un libellé centré et une flèche directionnelle.
.app-tooltip
Label
Signature HTML
<span class="app-tooltip" role="tooltip">Usage
Utiliser un tooltip pour clarifier un bouton icône, un terme court ou une action dont le libellé visible est volontairement réduit.
- Garder un texte court, direct et non essentiel à la compréhension principale.
- Associer le tooltip à un élément focusable si l’information apparaît au survol.
- Ne pas placer d’action, de lien ou de contenu long dans le tooltip.
- Préférer une aide visible dans la page si l’information est indispensable.
Variantes
Les variantes servent uniquement à orienter la flèche selon la position du tooltip autour de l’élément cible.
défautLabel
.is-bottomLabel
.is-leftLabel
.is-rightLabel
.is-largeInfo courte
Accessibilité
Le tooltip doit compléter une information déjà disponible ou expliciter un contrôle. Il ne doit pas devenir le seul endroit où une instruction critique est présentée.
- Relier le tooltip à son déclencheur avec
aria-describedbylorsque le tooltip est rendu dans l’interface. - Rendre le déclencheur accessible au clavier, pas uniquement au survol souris.
- Ne pas utiliser
role="tooltip"pour une popover interactive. - Vérifier que le contraste texte / fond reste conforme après changement de thème.
À éviter
- Ne pas utiliser un tooltip pour masquer une explication nécessaire.
- Ne pas afficher plusieurs tooltips simultanément dans une même zone.
- Ne pas y placer de contenu complexe, de formulaire ou de navigation.