Composant · Overlay

Tooltip

Stable

Bulle d'aide contextuelle qui apparaît au survol ou au focus d'un élément. Non interactive et purement informative ; le contenu doit rester court.

Quand l'utiliser

Expliquer brièvement une icône, un terme ou un contrôle ambigu.
Pour un contenu cliquable ou persistant, utilisez Toggletip ou Popover.
Ne mettez jamais une information essentielle uniquement dans un tooltip.

Placement

Le tooltip s'affiche au-dessus (top, défaut) ou en dessous (bottom) du déclencheur.

Placement

Voir le code (Svelte)

<Tooltip content="Affiché au-dessus" placement="top">
  <Button variant="secondary">Survol haut</Button>
</Tooltip>
<Tooltip content="Affiché en dessous" placement="bottom">
  <Button variant="secondary">Survol bas</Button>
</Tooltip>

Déclencheurs

Le tooltip apparaît au survol et au focus du déclencheur (clavier inclus).

Déclencheurs

Voir le code (Svelte)

<Tooltip content="Synchroniser maintenant">
  <Button>Action</Button>
</Tooltip>
<Tooltip content="Aide sur ce champ : tabulez jusqu'ici pour voir la bulle au focus.">
  <a href="#tooltip-demo">Lien focusable</a>
</Tooltip>

Anatomie

Conteneur (.st-tooltip) : enveloppe inline positionnée en relatif.
Déclencheur (.st-tooltip__trigger) : l'élément enfant survolé/focusé.
Bulle (.st-tooltip__content, role="tooltip") : surface inversée, max 16 rem de large.

Accessibilité

La bulle a role="tooltip".
Elle apparaît au :hover ET au :focus-within : accessible au clavier si le déclencheur est focusable.
Placez un élément focusable (bouton, lien) comme enfant pour la rendre atteignable sans souris.
Pour relier explicitement le tooltip au déclencheur, ajoutez aria-describedby côté déclencheur.

Lignes directrices

À faire

Texte court, une phrase au maximum.
Attacher le tooltip à un élément focusable.

À éviter

Mettre des liens ou boutons dans la bulle (non interactive).
Y cacher une instruction indispensable à la tâche.

API

Prop	Type	Défaut	Description
`content`	`string`	requis	Texte de la bulle.
`placement`	`"top" \| "bottom"`	`"top"`	Position de la bulle par rapport au déclencheur.
`children`	`Snippet`	déclencheur	L'élément qui déclenche le tooltip.
`class`	`string`	optionnel	Classe(s) sur le conteneur.
Autres attributs	`HTMLAttributes<HTMLSpanElement>`	N/A	Propagés sur le <span> conteneur.

Tokens utilisés

--st-component-tooltip-background
--st-component-tooltip-text
--st-component-tooltip-radius
--st-component-tooltip-shadow
--st-component-tooltip-zIndex