Tooltip
Hover/focus hint text.
Usage
Wrap all tooltips in a single Tooltip.Provider — it manages shared
delay timing and the "skip delay" behaviour when moving between triggers quickly. The child snippet on Tooltip.Trigger renders any
focusable element as the anchor.
Badge with tooltip
Placement
The side prop on Tooltip.Content controls
preferred placement. Like all floating elements, it auto-flips near viewport edges.
Props
Built on bits-ui — all underlying Bits UI Tooltip props are forwarded
transparently.
| Prop | Type | Default |
|---|---|---|
Tooltip.Provider — delayDuration Delay in ms before the tooltip opens on hover. | number | 700 |
Tooltip.Provider — skipDelayDuration Delay in ms before a second tooltip opens without the full delay. | number | 300 |
Tooltip.Root — open Controlled open state. | boolean | — |
Tooltip.Root — onOpenChange Callback fired when open state changes. | (open: boolean) => void | — |
Tooltip.Trigger — child Render prop that spreads trigger props onto a real element. | Snippet<[{ props: object }]> | — |
Tooltip.Content — side Preferred side for the tooltip. | 'top' | 'right' | 'bottom' | 'left' | 'top' |
Tooltip.Content — sideOffset Gap in px between trigger and tooltip. | number | 4 |
Tooltip.Content — class Extra classes merged onto the tooltip panel. | string | — |