Composant · Overlay

Popover

Stable

Surface flottante compacte ancrée à un déclencheur, pour un détail contextuel ou une mini-tâche sans bloquer le flux. Contrairement au Tooltip, son contenu peut être interactif ; contrairement au Modal, il n'assombrit pas l'arrière-plan.

Voir le code (Svelte)

<Popover
  open
  placement="bottom"
  content="Cliquez pour copier l'identifiant du composant."
>
  <Button variant="secondary">Info</Button>
</Popover>

Quand l'utiliser

Afficher un détail riche ou interactif au clic d'un déclencheur.
Présenter une mini-tâche (sélection, réglage rapide) sans quitter l'écran.
Pour un simple texte d'aide non interactif, préférez Tooltip ou Toggletip.

Quand ne pas l'utiliser

Pour un workflow long : utilisez Drawer ou une page dédiée.
Pour une décision bloquante : utilisez Modal.
Pour une liste d'actions, préférez Menu (role="menu").

Placement

Le panneau s'ancre au-dessus, en dessous, à gauche ou à droite du déclencheur via placement.

Placement

Voir le code (Svelte)

<Popover open placement="bottom" label="Détail bas">
  <Button variant="secondary">Bas (défaut)</Button>
</Popover>
<Popover open placement="top" label="Détail haut">
  <Button variant="secondary">Haut</Button>
</Popover>
<Popover open placement="right" label="Détail droite">
  <Button variant="secondary">Droite</Button>
</Popover>
<Popover open placement="left" label="Détail gauche">
  <Button variant="secondary">Gauche</Button>
</Popover>

Anatomie

Hôte (.st-popover-host) : enveloppe inline positionnée en relatif, contient le déclencheur.
Déclencheur : fourni via le snippet trigger ; à vous de basculer open au clic.
Ouverture : en React/Vue, un clic sur l'hôte ouvre le panneau ; en Svelte, l'ouverture est entièrement contrôlée (câblez onclick sur votre déclencheur pour basculer open).
Panneau (.st-popover, role="dialog") : surface flottante, min 16 rem de large, positionnée selon placement.

Accessibilité

Le panneau a role="dialog" et un aria-label fourni par la prop label.
Le déclencheur doit être un élément focusable (bouton) qui bascule l'état open.
Ajoutez aria-haspopup="dialog" et aria-expanded sur le déclencheur côté hôte.
Pour une fermeture sur Escape ou clic extérieur intégrée, voir MenuPopover.
openOn="hover" (ouverture au survol et au focus clavier) est spécifique à Svelte.

Lignes directrices

À faire

Garder le contenu compact et focalisé sur un seul sujet.
Câbler aria-expanded sur le déclencheur pour refléter l'état.

À éviter

Y loger un workflow complet ou un long formulaire.
Empiler plusieurs popovers ouverts simultanément.

API

Prop	Type	Défaut	Description
`open`	`boolean`	`false`	Affiche le panneau flottant.
`label`	`string`	requis	aria-label du panneau (role="dialog").
`placement`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Position du panneau par rapport au déclencheur.
`trigger`	`Snippet`	optionnel	Élément déclencheur, rendu dans l'hôte.
`children`	`Snippet`	optionnel	Contenu du panneau.
`class`	`string`	optionnel	Classe(s) sur le panneau.
Autres attributs	`HTMLAttributes<HTMLElement>`	N/A	Propagés sur le <section> panneau.

Tokens utilisés

--st-component-popover-background
--st-component-popover-border
--st-component-popover-radius
--st-component-popover-text
--st-component-popover-shadow
--st-component-popover-zIndex