Tooltip
In progress
ARIA
RTL
A means of displaying a description or extra information about an element, usually on hover, but can also be on click or tap.
Based on Radix.
Anatomy
<Tooltip>
<Tooltip.Trigger>...</Tooltip.Trigger>
<Tooltip.Content>
...
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip>Default
Arrow positions
Customization
Render content into the specific container (not body)
Tooltip.Trigger props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | - | Tailwind classes for customization |
Tooltip.Content props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | - | Tailwind classes for customization |
| position | top-start | top-center | top-end | bottom-start | bottom-center | bottom-end | right | left | No | top-center | Position of Tooltip |
| container | HTMLElement | null | No | document.body | Specify a container element to portal the content into. |
Tooltip.Arrow props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | - | Tailwind classes for customization |