Tooltip
A floating label that appears on hover. Wraps any element — no extra markup needed on the trigger.
Examples
Sides
On any element
HP
Rich content
Props
content*
ReactNode
The tooltip content.
children*
ReactNode
The element that triggers the tooltip.
side= 'top'
'top' | 'right' | 'bottom' | 'left'
Preferred side to render the tooltip.
sideOffset= 6
number
Distance in pixels from the trigger.
delayDuration= 300
number
Delay in ms before showing.
| Prop | Type | Default | Description |
|---|---|---|---|
| content* | ReactNode | — | The tooltip content. |
| children* | ReactNode | — | The element that triggers the tooltip. |
| side | 'top' | 'right' | 'bottom' | 'left' | 'top' | Preferred side to render the tooltip. |
| sideOffset | number | 6 | Distance in pixels from the trigger. |
| delayDuration | number | 300 | Delay in ms before showing. |