Components / Feedback
Tooltip
stableA short label revealed on hover or keyboard focus — supplementary context, never the only way to learn what a control does.
Hover or focus the button
SettingsAppears below
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
label | string | — | Yes | Tooltip text. |
side | 'top' | 'bottom' | 'top' | No | Which side the bubble appears on. |
children | ReactNode | — | Yes | The trigger element — shows the tooltip on hover or focus. |
Do
- Use to clarify an icon-only control (though IconButton’s label already covers the accessible name — Tooltip adds the visual hint).
- Keep the label to a few words.
Don't
- Put essential instructions only in a tooltip — mouse users on a touch device may never see it.
- Use a tooltip on a disabled element without also making it focusable, or the explanation is unreachable by keyboard.