Tooltip
À quoi il sert
Tooltip affiche une courte description d’un contrôle au focus clavier et au survol. Elle complète le nom du contrôle, elle ne le remplace pas.
Quand l’utiliser
- Préciser l’effet d’un bouton dont le nom est court.
- Ajouter une précision utile mais non indispensable à un contrôle.
Quand ne pas l’utiliser
- Pour un contenu essentiel : sur écran tactile, le texte n’est jamais affiché.
- Pour nommer un contrôle : le nom visible reste dans le contrôle.
- Pour un contenu interactif : utiliser Popover.
Exemples
Copie l’adresse dans le presse-papiers.
<Tooltip id="aide-copie" text="Copie l’adresse dans le presse-papiers.">
<button type="button" aria-describedby="aide-copie">Copier l’adresse</button>
</Tooltip>Accessibilité
Clavier
- Le focus clavier sur le contrôle affiche l’infobulle.
- Échap ferme l’infobulle sans déplacer le focus.
- L’infobulle ne reçoit pas le focus.
Lecteur d’écran
- L’infobulle porte role="tooltip" et son id.
- Le script ajoute aria-describedby sur le contrôle : le texte est lu comme description.
- Non vérifié : le rendu vocal avec VoiceOver, NVDA et JAWS.
Garanti par le composant
- Fermeture par Échap, survol de l’infobulle et maintien tant que le focus ou le survol demeure (WCAG 1.4.13).
- Avec (hover: none), le texte n’est jamais affiché.
- Bordure visible en plus du fond ; en forced-colors: active, elle prend CanvasText.
À la charge de l’intégrateur
- Sans JavaScript, poser aria-describedby sur le contrôle, avec l’id de l’infobulle : le composant ne modifie pas son slot.
- Placer un seul élément focalisable dans le slot.
- Ne jamais mettre dans l’infobulle une information nécessaire à la tâche.
- Garder un id unique par page.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| text (obligatoire) | string | — | Texte de la description, court et sans balisage. |
| id (obligatoire) | string | — | Identifiant unique de l'infobulle, cible de `aria-describedby`. |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-color-control--pp-color-fg--pp-color-surface--pp-font-line-height-body--pp-font-size--1--pp-radius-control--pp-size-measure--pp-size-rule--pp-space-2xs--pp-space-3xs--pp-z-overlay
Preuves et décisions
- WCAG 1.4.13 Contenu au survol ou au focus
- Motif APG Tooltip
- Tests : packages/astro/test/Tooltip.test.ts