Tooltip
A small, transient label attached to a control. Its most useful job in a data tool is explaining why a control is disabled — pair it with a control that stays focusable when disabled so the reason is reachable by keyboard, not just on hover. A tooltip is supplementary; never put required information only here.
Basic
<Tooltip content="Sync runs every 5 minutes"> <Button variant="secondary"> <Info className="size-4" /> Sync </Button></Tooltip>Disabled reason
<Tooltip content="You need admin access to invite members"> <Button disabled>Invite member</Button></Tooltip>Flab buttons stay focusable while disabled, so the reason is reachable with the keyboard. Tab to the button and the tooltip appears.
Sides
<Tooltip content="Top" side="top"><Button variant="secondary">Top</Button></Tooltip><Tooltip content="Right" side="right"><Button variant="secondary">Right</Button></Tooltip><Tooltip content="Bottom" side="bottom"><Button variant="secondary">Bottom</Button></Tooltip>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
content | ReactNode | — | The tooltip label. |
children | ReactElement | — | A single focusable trigger element. |
side | 'top' | 'right' | 'bottom' | 'left' | 'top' | Preferred placement. |
sideOffset | number | 6 | Gap from the trigger, in px. |
delay | number | — | Open delay in ms; shares a provider when set. |