Tooltip
A short label in the ink and paper inversion, for icon buttons and shortcuts. It opens on hover and on keyboard focus, so it must never hold the only copy of something important.
bunx --bun shadcn@4.17.0 add @waimakers/tooltip- npm dependencies
- @base-ui/react@1.9.0
From the registry
The shadcn Tooltip on Base UI, not Radix. The popup is the ink/paper inversion (bg-foreground on text-background) rather than shadcn's bg-primary, because the brand forbids orange as a surface behind text; the enter is the Popover's scale/opacity move, honouring motion-reduce. Carries an aside, never the only place something is said.
Examples
Icon buttons
Every icon button needs an accessible name; the tooltip shows it to sighted pointer users as well.
With a shortcut
A Kbd inside the tooltip switches to the inverted colours on its own.
On a disabled control
A disabled button cannot take focus, so wrap it in a focusable span to explain why it is disabled.
States
A focused trigger shows the shared ring and opens its tooltip.