Component · 10
Tooltip
A short hint, inked in: the inverse of the page. Opens on hover and on keyboard focus, closes with Escape. Built on Base UI.
Default
Hover the button, or Tab to it.
<Tooltip content="Save changes">
<Button>Save</Button>
</Tooltip>Sides
<Tooltip content="Top" side="top"><Button>Top</Button></Tooltip>
<Tooltip content="Right" side="right"><Button>Right</Button></Tooltip>
<Tooltip content="Bottom" side="bottom"><Button>Bottom</Button></Tooltip>
<Tooltip content="Left" side="left"><Button>Left</Button></Tooltip>Shared delay
Wrap a group in TooltipProvider so that moving from one to the next opens instantly.
<TooltipProvider>
<Tooltip content="Bold"><Button aria-label="Bold">B</Button></Tooltip>
<Tooltip content="Italic"><Button aria-label="Italic">I</Button></Tooltip>
<Tooltip content="Underline"><Button aria-label="Underline">U</Button></Tooltip>
</TooltipProvider>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| content | ReactNode | required | The text shown. Keep it short. |
| children | ReactElement | required | The one element that triggers it, e.g. a Button. It must accept a ref and props. |
| side | "top" | "right" | "bottom" | "left" | "top" | Preferred side. It flips if there is no room. |
| align | "start" | "center" | "end" | "center" | Alignment along that side. |
| sideOffset | number | 6 | Gap in pixels between trigger and tooltip. |
| delay / closeDelay | number | 600 / 0 | Milliseconds of hover before it opens / after it leaves. |
| open / defaultOpen / onOpenChange | - | - | Control it yourself. |
| disabled | boolean | false | Never opens. |
Tooltips are visual only. The text is not announced to screen readers, and touch devices have no hover. Never put essential information in one. For an icon-only trigger, give it an aria-label with the same text, as above.