Tooltip
stableShort label on hover or focus with an optional shortcut, origin-aware motion and instant skip between tooltips.
Basic
minimal
Shortcut, sides and shared provider
full
Editor toolbar with shared delay
Tooltip parts under one TooltipProvider, so moving across the formatting toolbar skips the open delay.
composition
Launch note: the new composer ships behind the composer_v2 flag on Thursday, starting with 10% of workspaces.
Installation
npx shadcn@latest add https://kuro.abstergo.fyi/r/tooltip.jsonCopies the source into components/kura/tooltip with its dependencies (kura-theme, kbd, kura-keys, utils). Tokens come from the kura-theme item.
When to use it
Use it for
- Name an icon-only control or reveal its shortcut.
- Brief supplementary hints (a few words).
Reach for something else when
- Interactive or rich content (links, buttons, forms) — use popover.
- Essential information — it is invisible on touch devices; put it in the UI.
- Labelling icon buttons — icon-button already includes a tooltip.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| content* | React.ReactNode | — | The label. Keep it to a few words. |
| children* | React.ReactElement | — | The trigger: one focusable element that accepts a ref. |
| shortcut | readonly KeyName[] | — | Keys shown after the label, e.g. ["mod", "enter"]. |
| side | "top" | "right" | "bottom" | "left" | "top" | Preferred side. |
| align | "start" | "center" | "end" | "center" | Alignment on that side. |
| delayDuration | number | 500 | Hover delay in ms before opening. Inside a TooltipProvider, defaults to the provider's. |
| disabled | boolean | false | Render only the trigger. |
| contentClassName | string | — | Classes for the floating bubble. |
All native attributes of the root element, className and ref pass through.
Anatomy
- TooltipProviderOptional shared provider so moving between tooltips skips the delay.
- TooltipRootRadix Root, for fully custom compositions.
- TooltipTriggerRadix Trigger.
- TooltipContentStyled floating bubble; accepts `shortcut`.
data-slot="tooltip-content"
Accessibility
- Role:
tooltip - Opens on hover after a delay and immediately on keyboard focus; the trigger gets aria-describedby.
- Never the only way to reach information; not shown on touch.
- Reduced motion: Scale and travel are removed; only a fast fade remains.
| Keys | Action |
|---|---|
| Tab | Focus the trigger and open |
| Escape | Close |
Notes for agents
- The child must forward refs and accept event props (Kura Button/IconButton do). Wrap plain text in a <button>.
- <Tooltip> (and IconButton) creates its own provider only when standalone; inside a <TooltipProvider> it joins it, so wrapping a toolbar in TooltipProvider makes moving between sibling tooltips instant.