All components (204)

Tooltip

Layers · Tooltip · .amset-tooltip

What it is and when to use it

Contextual help: a short sentence next to a button or a link. It appears on mouse hover and on arriving with the keyboard, which is the half that is usually missing.

When to use it

Clarifying what an icon button or a non-obvious action does: "Copies the tax ID to the clipboard".
disabled when the text is already fully visible and the tooltip is superfluous: it returns the element as is, with no wrapper.
On touch screens, where there is no mouse to hover, add 'press' to openOn: it opens and closes when the element is pressed, and closes when pressing outside.

When not to

Essential information: it goes in the field's hint or in the text, not hidden behind an icon.
More than one sentence, or something that has to be pressed inside: Dropdown.
Naming an icon button: that is done by its aria-label (IconButton requires it); the tooltip only describes it.

Keyboard: on arriving at the element with Tab it appears immediately, without waiting for the delay; it goes away when focus leaves, and Escape closes it without moving focus.

Accessibility: it is announced as tooltip and remains as the description of the element that triggers it, not as its name. trigger has to be focusable (a button, a link): otherwise, with the keyboard it never appears. The arrow is decoration.

Fine-tuning: CSS variables --amset-tooltip-*: -background, -ink, -width (14, 16 or 20 rem depending on the size), -padding-block, -padding-line, -font and -radius. It is rendered in the browser's top layer as a manual popover, which does not close what is open next to it: inside a dialog it is still visible.

What it looks like

<Tooltip trigger={<Button variant="outline">Export</Button>}>Exported as CSV</Tooltip>

Props

Import it with import { Tooltip } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode`	The help text. Short: if it needs a paragraph, it is not a tooltip.
`trigger`required	`ReactElement<{ readonly onClick?: (event: MouseEvent<HTMLElement>) => void; }>`	Element that triggers it. It has to be focusable (a button, a link).
`className`	`string`	Merged with the library classes; it does not replace them.
`closeDelay`	`number`	Milliseconds of grace on leaving: avoids flicker when passing by.
`defaultOpen`	`boolean`	Open on mount, without controlling it from outside.
`delay`	`number`	Milliseconds before appearing on mouse hover. With focus it appears immediately.
`disabled`	`boolean`	Off: useful when the text is already fully visible and the tooltip is redundant.
`offset`	`number`	Separation in pixels from the element.
`onOpenChange`	`(open: boolean) => void`	Notifies of every attempt to open or close, whether it comes from the mouse, from focus or from Escape.
`open`	`boolean`	Open or closed, driven from OUTSIDE. Mouse and focus still notify through `onOpenChange`, but no longer decide: whoever passes it decides. It is for showing the help without anyone asking for it (a step of a guided tour, a notice after an error) and for photographing it in the test bench.
`openOn`	`readonly TooltipOpenOn[]`	What opens it. By default `['hover', 'focus']`, which on a touch screen is never seen: there `'press'` is needed, which toggles it on press and closes it when pressing outside. If `'press'` is set WITHOUT `'focus'`, the keyboard does not open it, so it is normally added to the other two and does not replace them.
`side`	`TooltipSide`	—
`size`	`"sm" \| "md" \| "lg"`	The font size and the maximum width: 14, 16 or 20 rem.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-tooltip-background`	`var(--amset-ink)`
`--amset-tooltip-ink`	`var(--amset-surface)`
`--amset-tooltip-width`	`16rem`
`--amset-tooltip-padding-block`	`var(--amset-space-2)`
`--amset-tooltip-padding-line`	`var(--amset-space-3)`
`--amset-tooltip-font`	`var(--amset-text-sm)`
`--amset-tooltip-radius`	`var(--amset-radius)`

How to change it

.amset-tooltip {
  --amset-tooltip-background: ...;
  --amset-tooltip-ink: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: