Browse the docs
Tooltip (JS)
Positioned tooltip on the tooltip primitive: flips to stay inside the viewport, opens after a delay on hover and instantly on keyboard focus, dismisses with Escape, and never opens on touch — the WCAG 1.4.13 boxes the CSS-only version can't tick.
The CSS-only Tooltip stays the zero-JS default for short labels with room around them; use this one near viewport edges or when the bubble must be dismissible.
This component needs the tooltip primitive — two ways to get it:
- Copy: fetch
/r/primitives/tooltip.txt— one file with the shared core embedded — and save it asprimitives/tooltip.js. - Install:
npm install @presetui/ui— the primitives are bundled, no second package — then use the Source · npm tab below, whose import already points at@presetui/ui/primitives/tooltip.
Props
| Prop | Values | Default | Description |
|---|---|---|---|
content | node | required | What the bubble says. |
side | "top", "bottom", "left", "right" | "top" | Preferred side; flips when out of room. |
delay | ms | 400 | Hover delay. Keyboard focus always opens instantly. |
className | string | "" | Applied to the bubble. |
children must be a single focusable element with its own accessible name —
the trigger behavior merges onto it and aria-describedby wires itself.
Notes
A tooltip is extra information: anything essential belongs in visible copy.
For custom arrangements use the primitive directly: TooltipRoot,
TooltipTrigger, TooltipContent.