Tooltip
A short label on hover or focus, naming a control that shows only an icon.
A tooltip names a control; it does not explain one. It appears on hover and focus, so it is unreachable by touch — never put information there that a reader needs in order to proceed. For an icon-only button, IconButton already builds this in.
Sides
Delay
Tooltips open after 400ms by default, and no provider is required — the context carries that default. Wrap a region in TooltipProvider to change the delay across it.
skipDelayDuration is the grace period after one tooltip closes in which the next opens instantly, so moving along a row of icon buttons does not make you wait at every one. It is off by default — opt in per provider.
The skip window is tracked globally rather than per provider, on purpose: IconButton renders a provider per button, so provider-scoped state would never see the tooltip you just came from — which is the only case the setting exists for.
Props
TooltipProvider
| Prop | Type | Default | Description |
|---|---|---|---|
delayDuration | number | 400 | Milliseconds before a tooltip opens. |
skipDelayDuration | number | 0 | Grace period after a tooltip closes in which the next opens instantly. 0 disables it. |
TooltipContent
| Prop | Type | Default | Description |
|---|---|---|---|
side | FloatingSide | — | Preferred side. |
align | FloatingAlign | — | start, center or end. |
sideOffset | number | — | Gap between trigger and tooltip. |