Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Features
- Provider to control display delay globally.
- Opens when the trigger is focused or hovered.
- Closes when the trigger is activated or when pressing escape.
- Supports custom timings.
Install
Import
API
Provider
| Props | Type | Default |
|---|---|---|
delayDuration | number | 700 |
disableClosingTrigger | boolean | false |
disabled | boolean | false |
disableHoverableContent | boolean | false |
ignoreNonKeyboardFocus | boolean | false |
skipDelayDuration | number | 300 |
Root
| Props | Type | Default |
|---|---|---|
defaultOpen | boolean | false |
delayDuration | number | 400 |
disableClosingTrigger | boolean | false |
disabled | boolean | false |
disableHoverableContent | boolean | false |
ignoreNonKeyboardFocus | boolean | false |
open | boolean | undefined |
| Event | Type |
|---|---|
update:open | [_value: boolean] |
Trigger
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | button |
asChild | boolean | false |
| Data attribute | Value |
|---|---|
[data-state] | 'closed' | 'delayed-open' | 'instant-open' |
Portal
| Props | Type | Default |
|---|---|---|
disabled | boolean | false |
forceMount | boolean | false |
to | string | HTMLElement | body |
Content
| Props | Type | Default |
|---|---|---|
align | 'start' | 'center' | 'end' | center |
alignOffset | number | 0 |
ariaLabel | string | - |
arrowPadding | number | 0 |
as | AsTag | Component | div |
asChild | boolean | false |
avoidCollisions | boolean | true |
collisionBoundary | Element | (Element | null)[] | null | () => [] |
collisionPadding | number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>> | 0 |
hideWhenDetached | boolean | false |
side | 'top' | 'right' | 'bottom' | 'left' | top |
sideOffset | number | 0 |
sticky | 'partial' | 'always' | partial |
| Event | Type |
|---|---|
escapeKeyDown | [_event: KeyboardEvent] |
pointerDownOutside | [_event: Event] |
| Data attribute | Value |
|---|---|
[data-state] | 'closed' | 'delayed-open' | 'instant-open' |
[data-side] | 'left' | 'right' | 'bottom' | 'top' |
[data-align] | 'start' | 'end' | 'center' |
| CSS Variable | Description |
|---|---|
--destyler-tooltip-content-transform-origin | The transform-origin computed from the content and arrow positions/offsets |
--destyler-tooltip-content-available-width | The remaining width between the trigger and the boundary edge |
--destyler-tooltip-content-available-height | The remaining height between the trigger and the boundary edge |
--destyler-tooltip-trigger-width | The width of the trigger |
--destyler-tooltip-trigger-height | The height of the trigger |
Arrow
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
height | number | 5 |
width | number | 10 |