Tooltip
Informational hover tip
Parts: TooltipProvider, TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow
TooltipProvider
Props
| Prop | Type | Default |
|---|---|---|
delayDuration | number | 700 |
disableClosingTrigger | boolean | - |
disabled | boolean | - |
disableHoverableContent | boolean | false |
ignoreNonKeyboardFocus | boolean | false |
skipDelayDuration | number | 300 |
TooltipRoot
Props
| Prop | Type | Default |
|---|---|---|
defaultOpen | boolean | false |
delayDuration | number | - |
disableClosingTrigger | boolean | - |
disabled | boolean | - |
disableHoverableContent | boolean | - |
ignoreNonKeyboardFocus | boolean | - |
open | boolean | - |
Emits
| Event | Payload |
|---|---|
update:open | [value: boolean] |
Slots
| Slot | Type |
|---|---|
open | boolean |
TooltipTrigger
Props
| Prop | Type | Default | |
|---|---|---|---|
as | `AsTag \ | Component` | "button" |
asChild | boolean | - |
TooltipPortal
Props
| Prop | Type | Default | |
|---|---|---|---|
disabled | boolean | - | |
forceMount | boolean | - | |
to | `string \ | HTMLElement` | - |
TooltipContent
Props
| Prop | Type | Default | |||
|---|---|---|---|---|---|
align | `"start" \ | "center" \ | "end"` | - | |
alignOffset | number | - | |||
ariaLabel | string | - | |||
arrowPadding | number | - | |||
as | `AsTag \ | Component` | "div" | ||
asChild | boolean | - | |||
avoidCollisions | boolean | - | |||
collisionBoundary | `Element \ | (Element \ | null)[] \ | null` | - |
collisionPadding | `number \ | Partial<Record<"top" \ | "right" \ | "bott...` | - |
forceMount | boolean | - | |||
hideWhenDetached | boolean | - | |||
side | `"top" \ | "right" \ | "bottom" \ | "left"` | "top" |
sideOffset | number | - | |||
sticky | `"partial" \ | "always"` | - |
Emits
| Event | Payload |
|---|---|
escapeKeyDown | [event: KeyboardEvent] |
pointerDownOutside | [event: Event] |
TooltipArrow
Props
| Prop | Type | Default | |
|---|---|---|---|
as | `AsTag \ | Component` | "svg" |
asChild | boolean | - | |
height | number | 5 | |
width | number | 10 |