Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA shared delay for a row of tooltips: the first one waits, its neighbours open instantly, and the group cools down when the pointer leaves.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for a row of icon-only controls (an editor toolbar, a media bar, a sidebar rail) where every button needs a tip. Waiting half a second on each button is slow, so the group makes the second and later tips instant.
Do not use it for a single control: the plain tooltip is enough. Do not put essential information in a tip, because touch users never see it; use a toggletip for that.
| Prop | Type | Default | Description |
|---|---|---|---|
delayDuration | number | 500 | Milliseconds before the first tooltip opens. |
skipDelayDuration | number | 300 | How long after a tooltip closes the next one still opens at once. |
| Prop | Type | Default | Description |
|---|---|---|---|
content | ReactNode | - | The text of the tip. |
shortcut | string | - | A key combination shown as a kbd beside the text. |
side | "top" | "right" | "bottom" | "left" | top | Preferred side. |
sideOffset | number | 6 | Gap to the trigger in px. |
children | ReactElement | - | The trigger. It keeps its own role and name. |
aria-describedby and the tip has role="tooltip".prefers-reduced-motion.| Key | Action |
|---|---|
| Tab | shows the tooltip of the focused control |
| Escape | closes the open tooltip |
The component ships a Testing Library test (tooltip-group.test.tsx) that covers keyboard focus, aria-describedby, moving to a neighbour and Escape.