Overlay
Tooltip
A small label that names an element on hover or focus — essential for icon-only buttons and avatars. Wraps any trigger, points at it with an arrow, and can show a keyboard shortcut.
npx shadcn@latest add @orbit/tooltipOverview
Variants
dark is the default and works on most surfaces; light suits dark or photographic backgrounds.
Placement
The arrow always points back to the trigger. Default is top; choose the side with the most room. Shown open for reference.
Content
Keep it to a short label. Add a keyboard shortcut for actions — multi-key combos split on “+” — or allow wrapping for a longer hint (max 220px).
Delays
Opens after 180ms by default and closes immediately. Inside a TooltipProvider, once one tooltip opens its neighbours open instantly.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| content | ReactNode | — | Tooltip label. Keep it to a few words. |
| shortcut | string | — | Keyboard hint rendered as kbd chips; multi-key combos split on “+” (e.g. “⌘+K”). |
| side | "top" | "bottom" | "left" | "right" | "top" | Placement relative to the trigger. Flips automatically to avoid collisions. |
| variant | "dark" | "light" | "dark" | Dark inverse surface, or light surface with border for dark backgrounds. |
| multiline | boolean | false | Allows wrapping at a 220px max width for longer hints. |
| delay | number | 180 | Wait before opening, in ms. |
| closeDelay | number | 0 | Wait before closing, in ms. |
| forceOpen | boolean | false | Keeps the tooltip open — for demos and documentation. |
| disabled | boolean | false | Prevents the tooltip from opening; the trigger stays interactive. |
| children | ReactElement | — | The trigger. Hover/focus handlers and ARIA attributes merge onto it. |
Usage
Tooltips supplement; they never hold essential or interactive content.
Label icon-only controls
Every icon button and bare avatar should name itself on hover and focus.
Put links or buttons inside
Tooltips are pointer-none and vanish on move — interactive content is unreachable. Use a popover.
Keep it to a few words
A tooltip names or hints; long explanations belong in helper text or a popover.
Hide essential information
If a user must read it to proceed, show it inline — not only on hover.
Keyboard & accessibility
Built on Base UI Tooltip: role=tooltip, opens on focus-visible as well as hover, Escape dismisses, and it never intercepts the pointer. Always give icon-only triggers an aria-label that matches the tooltip.