A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Anchor on top, right, bottom, or left with the side prop.
Combine text with Kbd to hint a shortcut.
Wrap a disabled control in a span so the tooltip still triggers.
| Prop | Type | Default | Description |
|---|---|---|---|
delayDuration | number | 700 | Hover delay before showing. |
skipDelayDuration | number | 300 | Window during which the next tooltip skips the delay. |
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Open state. Supports v-model:open. |
| Event | Description |
|---|---|
update:open | Fires when the tooltip shows or hides. |
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Merge props onto the child element. |
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "top" | Anchor side. |
sideOffset | number | 4 | Gap from the trigger in px. |
Keyboard shortcuts and ARIA behavior.
| Shortcut | Description |
|---|---|
| Tab | Moving focus onto the trigger shows the tooltip. |
| Esc | Dismisses the tooltip while it is open. |