Tooltip
Hover and Focus
Preview
index.tsx10.00010.00010.00010.00010.00010.00010.00010.00010.00010.00010.00010.000
SafePolygon
Preview
index.tsx10.00010.00010.00010.00010.00010.00010.00010.00010.00010.00010.00010.000
Toggle and Delay
Preview
index.tsx10.00010.00010.00010.00010.00010.00010.00010.00010.00010.00010.00010.000
Design Tokens for Tooltip
| Token | Color for | State/Meaning |
|---|---|---|
| --par-color-bg-surface-inverse | Tooltip background | Default |
| --par-color-text-primary-inverse | Tooltip text | Default |
| --par-color-bg-surface-inverse | Tooltip arrow | Default |
Tooltip API Reference
<Tooltip />
| Prop | Type | Default | Description |
|---|---|---|---|
| content | string | ReactNode | Tooltip content | |
| position | string | 'top' | Tooltip placement |
| isToggle | boolean | false | Toggle on click |
| delay | number | 0 | Delay before show on hover (ms) |
| touchDelay | number | Delay before show on touch (ms) | |
| isSafePolygon | boolean | false | Safe polygon interaction |
| controlledOpen | boolean | Controlled visibility | |
| ...divProps | HTMLDivElement props | All native div props (className, style, ...) |
Note: Tooltip inherits all native props from HTMLDivElement.