Popover

Purpose

A panel anchored to a button, that does not take the page: a little content or a few controls next to the control that opened it. The button says whether it is open, the panel takes the focus when it opens, Escape closes it and gives the focus back, Tab out of it closes it without taking the focus back, a click outside closes it with no veil.

When to use, when not

Use it for help that is more than a sentence, for a few options that apply at once (the columns of a table), for a small piece of content the page does not need read. Use Tooltip for one sentence that describes a term; Menu for commands; Dialog for what must be answered before going on; Disclosure for content that belongs in the flow.

Anatomy

1. The button, with its text and the chevron.
2. The panel, when open: the title if any, then the content.

Props

Props of Popover

Name	Type	Default	What it does
label	string		The button's text: what the panel holds ("Filtres", "Aide"). It names the panel too, unless there is a title.
title?	string | undefined		A heading at the top of the panel, which then names it.
open?	boolean	false	Shown or not; bindable.
align?	'start' | 'end'	'start'	Which edge of the button the panel aligns with.
variant?	'secondary' | 'ghost'	'secondary'	The button's look: `secondary` has the control line, `ghost` draws nothing until hovered.
class?	string	''	Layout classes only.
children	Snippet		The panel's content.

States

Help under a ghost button, controls in a titled panel, and end-aligned.

controls

A few controls in a panel named by its title; Tab out of it closes it and the focus goes on.

Light

Colonnes

Dark

Colonnes

320 px, light

Colonnes

320 px, dark

Colonnes

216 px, light

Colonnes

Forced colours, captured

end

Aligned on the button's end edge, for a button at the right of a toolbar.

Light

Aide

Dark

Aide

320 px, light

Aide

320 px, dark

Aide

216 px, light

Aide

Forced colours, captured

help

A little help next to a control: open it, read, Escape brings the focus back to the button.

Light

Qu'est-ce qu'une dérogation ?

Dark

Qu'est-ce qu'une dérogation ?

320 px, light

Qu'est-ce qu'une dérogation ?

320 px, dark

Qu'est-ce qu'une dérogation ?

216 px, light

Qu'est-ce qu'une dérogation ?

Forced colours, captured

Accessibility contract

• Role and name: the button named by its text, with aria-expanded and aria-controls while open; the panel a dialog without aria-modal, named by its title or by the button’s text, with tabindex="-1".
• Keyboard, focus: Enter or Space opens and moves the focus into the panel; Tab walks its controls and leaves it, which closes it; Escape closes and returns the focus to the button.
• Live regions: none.
• Motion: the chevron turns under motion only.

Content rules

French. The button’s text says what the panel holds, as a noun or a question (“Colonnes”, “Qu’est-ce qu’une dérogation ?”); a title, when given, is a noun phrase.

Do and don’t

• Do put controls that apply at once; a form with a submit is a Dialog.
• Do not open it on hover or on focus.
• Do not nest a popover in a popover.

Examples

<Popover label="Colonnes" title="Colonnes affichées">
	<Checkbox id="col-level" label="Niveau" bind:checked={columns.level} />
</Popover>

Surfaces

• App: the column chooser of the audits table, help next to a setting.
• Extension: help next to a wizard’s control.

Related

Tooltip, Dialog, Menu, Disclosure.

Decisions

• 2026-09-26: a non-modal dialog role rather than a plain region: the panel takes the focus when it opens, and a reader hears what it entered.
• 2026-09-26: no veil behind the panel; a click outside closes it and lands where it was aimed, as Menu does.

Criteria held by construction

• 7.1, Chaque script est-il, si nécessaire, compatible avec les technologies d'assistance ?
  The button says its state with aria-expanded and names its panel with aria-controls; the panel is a named non-modal dialog that takes the focus.
• 7.3, Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage ?
  Escape closes and returns the focus to the button; Tab leaves the panel and closes it; nothing is trapped.
• 10.13, Dans chaque page web, les contenus additionnels apparaissant à la prise de focus ou au survol d'un composant d'interface sont-ils contrôlables par l'utilisateur ?
  The panel appears on a press, never on hover, and stays until dismissed.

Tokens it reads

• Colour: --rl-hover, --rl-ink, --rl-ink-soft, --rl-line-control, --rl-line-strong, --rl-surface
• Typography: --rl-weight-bold, --rl-text-sm
• Spacing: --rl-space-1, --rl-space-2, --rl-space-3, --rl-space-4
• Layout: --rl-radius, --rl-border, --rl-border-strong, --rl-z-drawer
• Motion: --rl-duration-fast, --rl-ease