Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Examples
Basic
Preview
Side
Preview
API
Tooltip
| Property | Type | Default | Description |
|---|---|---|---|
| defaultOpen | boolean | false | The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state. |
| open | boolean | - | The controlled open state of the tooltip. Must be used in conjunction with onOpenChange. |
| onOpenChange | (open: boolean) => void | - | Event handler called when the open state of the tooltip changes. |
| delayDuration | number | 700 | The duration from when the mouse enters a tooltip trigger until the tooltip opens. |
| disableHoverableContent | boolean | false | When true, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger. |
TooltipTrigger
| Property | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
TooltipContent
| Property | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
| side | ”top” | “right” | “bottom” | “left" | "top” | The preferred side of the trigger to render against when open. |
| sideOffset | number | 0 | The distance in pixels from the trigger. |
| align | ”start” | “center” | “end" | "center” | The preferred alignment against the trigger. May change when collisions occur. |
| alignOffset | number | 0 | An offset in pixels from the “start” or “end” alignment options. |
| avoidCollisions | boolean | true | When true, overrides the side and align preferences to prevent collisions with boundary edges. |
Last updated on