Tooltip
Small floating label that appears on hover or focus. Use for icon button names and brief shortcut hints.
Default
Wrap an element in TooltipTrigger.
Sides
Anchor on top / right / bottom / left.
API Reference
Props, events, and slots for each sub-component.
TooltipProvider
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| delayDuration | number | 700 | Hover delay before showing. |
| skipDelayDuration | number | 300 | Window during which the next tooltip skips the delay. |
Tooltip
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Open state. Supports v-model:open. |
Events
| Event | Description |
|---|---|
| update:open | Fires when the tooltip shows or hides. Enables v-model:open. |
TooltipTrigger
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Merge props onto the child element instead of a wrapper. |
TooltipContent
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "top" | "right" | "bottom" | "left" | "top" | Anchor side. |
| sideOffset | number | 4 | Gap from the trigger in px. |
Accessibility
Keyboard shortcuts and ARIA behavior.
Keyboard
| Shortcut | Description |
|---|---|
| Tab | Moving focus onto the trigger shows the tooltip. |
| Esc | Dismisses the tooltip while it is open. |
- Opens on keyboard focus, not only on pointer hover, so keyboard users get the same hint.
- The tooltip content is non-focusable and is linked to the trigger via aria-describedby.