Tooltip
A hover/focus label for controls whose purpose isn't already written on them.
Delete this lead
Not a replacement for a label
A tooltip is supplementary: it never appears on touch, and it can't be the only way to know what a control does. Icon-only buttons still need their own aria-label — the tooltip is for sighted mouse users on top of that, not instead of it.
Settings
With a subtitle
Use the subtitle for state the trigger can't show — when something last ran, why it's disabled.
Sync nowLast synced 4 minutes ago
Pointer position
Pick the side with room. In a left sidebar that means center-right; along the top of a page, bottom-center.
TopRightBottomLeft
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | Tooltip headline. Required. | |
| subtitle | string | Optional supporting line. | |
| pointer | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'center-left' | 'center-right' | 'top-center' | Which edge the bubble points from, and so which side of the trigger it sits on. |
| children | ReactNode | The element the tooltip attaches to. |