Composant · Overlays

Toggletip

Stable

Infobulle activable au clic et persistante : contrairement au Tooltip (survol/focus), la bulle reste affichée jusqu’à un nouveau clic ou Escape. Adaptée à un contenu lisible au lecteur d’écran (`aria-live="polite"`).

Exemples

Avec sur-titre et contenu

Voir le code (Svelte)

<Toggletip
  label="Aide"
  content="La bulle reste ouverte jusqu’à un nouveau clic ou à la touche Escape."
  triggerLabel="Plus d’informations"
/>

État fermé par défaut : cliquez le déclencheur pour ouvrir la bulle (open est bindable).

Placements

Voir le code (Svelte)

<Toggletip placement="top" label="top" content="Placement top" triggerLabel="top" />
<Toggletip
  placement="bottom"
  label="bottom"
  content="Placement bottom"
  triggerLabel="bottom"
/>
<Toggletip
  placement="start"
  label="start"
  content="Placement start"
  triggerLabel="start"
/>
<Toggletip placement="end" label="end" content="Placement end" triggerLabel="end" />

Toggletip inline

Voir le code (Svelte)

<Toggletip
  label="Taux d’occupation"
  content="Pourcentage de places réservées sur la capacité totale."
  triggerLabel="Définition"
/>

Sans slot children, le déclencheur s’affiche seul (icône « i » en Svelte, texte label en React/Vue).

API

Prop	Type	Default
`content`	`string`	requis
`label`	`string`	optionnel
`placement`	`"top" \| "bottom" \| "start" \| "end"`	`"top"`
`open`	`boolean` (`$bindable`)	`false`
`triggerLabel`	`string`	optionnel
`class`	`string`	optionnel
`children`	`Snippet`	optionnel

Notes d’usage

Le déclencheur est un bouton rond « i » (Svelte). `open` est `$bindable` : le clic bascule l’état, Escape ferme (géré via `svelte:window`).

`content` est la chaîne affichée dans la bulle ; `label` ajoute un sur-titre optionnel. L’`aria-label` du bouton utilise `triggerLabel ?? label ?? "More information"`.

`placement` positionne la bulle : `top` (défaut), `bottom`, `start`, `end`. Le slot `children` (Svelte) permet d’ajouter du contenu (ex. un libellé) avant le déclencheur ; en React/Vue, `label` sert de texte du bouton.

Tokens utilisés

--st-component-selection-switchTrack
--st-component-control-focusRing
--st-semantic-text-primary
--st-semantic-text-secondary
--st-semantic-surface-default
--st-semantic-border-subtle
--st-semantic-border-strong
--st-semantic-border-interactive
--st-radius-md
--st-shadow-sm
--st-zindex-overlay
--st-component-control-hoverBorder
--st-component-control-hoverBackground