Tooltip
Opens on hover and on focus, because an icon button explains itself to everyone or to nobody.
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/tooltip.jsonFocus, not just hover
A tooltip that only opens on hover explains nothing to someone driving the page from a keyboard. This one opens on both, and Escape dismisses a tip that is covering what you are reading.
It describes, it does not name
The label is wired through aria-describedby. It does not become the trigger's
accessible name, so an IconButton still needs its own label. Nothing
interactive should go inside — there is no path to it, since the tip closes as
soon as the pointer leaves the trigger.
Tooltip renders a wrapper element, which becomes the positioning context for
whatever it wraps. If the trigger was absolutely positioned, move that
positioning onto the tooltip's className — otherwise the trigger silently
reparents.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | The description. |
| side | "top" | "bottom" | "left" | "right" | "top" | Which side it opens on. |
| delay | number | 350 | Hover intent. Without it, crossing a toolbar flashes every tip in it. |
| className | string | — | Applied to the wrapper — where the trigger's positioning belongs. |