Tooltip
A CSS-only hover/focus tooltip — no JavaScript required. Wrap any element in Tooltip with a label prop. The tooltip is shown via CSS :hover and :focus-within pseudo-classes.
Default
Tooltip content
<Tooltip label="Tooltip content">
<Button>Hover me</Button>
</Tooltip>Position
position="top"
position="bottom"
position="left"
position="right"
<Tooltip label="Top tooltip" position="top">
<Button>top</Button>
</Tooltip>
<Tooltip label="Bottom tooltip" position="bottom">
<Button>bottom</Button>
</Tooltip>
<Tooltip label="Left tooltip" position="left">
<Button>left</Button>
</Tooltip>
<Tooltip label="Right tooltip" position="right">
<Button>right</Button>
</Tooltip>Fine-grained positions
top-start
top-end
bottom-start
bottom-end
<Tooltip label="Tooltip" position="top-start">...</Tooltip>
<Tooltip label="Tooltip" position="top-end">...</Tooltip>
<Tooltip label="Tooltip" position="bottom-start">...</Tooltip>
<Tooltip label="Tooltip" position="bottom-end">...</Tooltip>On any element
Badge
This is a badge
Hover this text
This is plain text
<Tooltip label="This is a badge" position="top">
<Badge>Badge</Badge>
</Tooltip>
<Tooltip label="Explanation" position="top">
<Text span style={{ textDecoration: 'underline dotted', cursor: 'help' }}>
Hover this text
</Text>
</Tooltip>Disabled
This tooltip is disabled
<Tooltip label="This tooltip is disabled" disabled>
<Button>No tooltip on hover</Button>
</Tooltip>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | children | — | Content rendered inside the tooltip popup |
position | 'top'|'bottom'|'left'|'right'|'top-start'|'top-end'|'bottom-start'|'bottom-end' | 'top' | Side where the tooltip appears |
disabled | boolean | — | Prevents the tooltip from showing |