Tooltip

Purpose

A description for a term that already has its name. The trigger keeps its text as its name and the bubble is its description, tied by aria-describedby, read at focus whether shown or not; the title attribute gives no such guarantee.

When to use, when not

Use it for a definition or a precision on a term in running text: a rate, a status, an abbreviation. Not for the name of an icon-only control (that is IconButton’s label), not for anything the reader must not miss (write it in the text), never with something interactive inside.

Anatomy

1. The group, which holds the trigger and the bubble so the pointer never leaves.
2. The trigger, a button with the term as its text, underlined with dots.
3. The bubble, role="tooltip", hidden at rest.

Props

Props of Tooltip

Name	Type	Default	What it does
text	string		The description, one or two sentences.
children	Snippet		The term, as the trigger's text. It is the trigger's name; the bubble only describes it.

States

In a sentence, and a short one.

inSentence

Hover or focus the term: the bubble shows, and the description is read at focus even while hidden. Escape closes it; the pointer may enter the bubble.

Light

Un audit porte sur cent six critères, et son taux de conformité se lit en pourcentage.

Dark

Un audit porte sur cent six critères, et son taux de conformité se lit en pourcentage.

320 px, light

Un audit porte sur cent six critères, et son taux de conformité se lit en pourcentage.

320 px, dark

Un audit porte sur cent six critères, et son taux de conformité se lit en pourcentage.

216 px, light

Un audit porte sur cent six critères, et son taux de conformité se lit en pourcentage.

Forced colours, captured

short

Light

Le critère est non applicable sur cette page.

Dark

Le critère est non applicable sur cette page.

320 px, light

Le critère est non applicable sur cette page.

320 px, dark

Le critère est non applicable sur cette page.

216 px, light

Le critère est non applicable sur cette page.

Forced colours, captured

Accessibility contract

• Role and name: the trigger is a button named by its text; the bubble is its description. role="tooltip" documents the intent.
• Keyboard, focus: the bubble shows on focus and hides when the focus leaves; Escape hides it and moves nothing. A click toggles it.
• Pointer: the bubble shows on hover of the trigger and stays while the pointer is on the trigger or in the bubble.
• Live regions: none; a bubble that spoke at every mouse move would make the page unlistenable.

Content rules

French. One or two sentences that define or precise; no link, no button inside.

Do and don’t

• Do put the essential in the text and the precision in the bubble.
• Do not use it to name a control.
• Do not open it on a delay or close it on a timer.

Examples

<p>Son <Tooltip text="Le rapport des critères conformes au nombre de critères applicables.">taux de conformité</Tooltip> se lit en pourcentage.</p>

Surfaces

• App: the report’s terms; not ported yet.
• Site: the sheets’ definitions, once the site is ported.

Related

Kbd, InlineMarkup.

Decisions

• 2026-09-24: the refusal by Escape is forgotten once the pointer and the focus have both left, as the site’s demo does; without it a bubble closed once never came back.

Criteria held by construction

• 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 bubble can be dismissed with Escape without moving the pointer or the focus, the pointer can enter it, and it stays while the trigger has the focus or the hover.
• 7.1, Chaque script est-il, si nécessaire, compatible avec les technologies d'assistance ?
  The bubble is the trigger's accessible description through aria-describedby, read at focus even while hidden; the trigger keeps its own name.
• 7.3, Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage ?
  The trigger is a button: the keyboard reaches it and the description is read at focus, with no hover needed.

Tokens it reads

• Colour: --rl-action, --rl-ink, --rl-line-control, --rl-line-strong, --rl-surface
• Typography: --rl-weight-regular, --rl-text-sm, --rl-leading-body
• Spacing: --rl-space-1-5, --rl-space-2, --rl-space-3
• Layout: --rl-radius, --rl-border-strong, --rl-z-drawer