Tooltip
Props
API reference for Tooltip. For usage examples, see the React tab.
Tooltip.Root
| Name | Type | Default |
|---|---|---|
| children (required) | ReactNode | |
| closeDelay | number | 500 |
The delay time for the tooltip to close. See guidelines (opens in new tab). | ||
| defaultOpen | boolean | |
Whether the overlay is open by default (uncontrolled). | ||
| delay | number | 1500 |
The delay time for the tooltip to show up. See guidelines (opens in new tab). | ||
| isDisabled | boolean | |
Whether the tooltip should be disabled, independent from the trigger. | ||
| isOpen | boolean | |
Whether the overlay is open by default (controlled). | ||
| shouldCloseOnPress | boolean | true |
Whether the tooltip should close when the trigger is pressed. | ||
| trigger | "focus" | "hover" | 'hover' |
By default, opens for both focus and hover. Can be made to open only for focus. | ||
Tooltip.Content
| Name | Type | Default |
|---|---|---|
| children (required) | ReactNode | |
| arrowBoundaryOffset | number | 0 |
The minimum distance the arrow's edge should be from the edge of the overlay element. | ||
| containerPadding | number | 12 |
The placement padding that should be applied between the element and its surrounding container. | ||
| crossOffset | number | 0 |
The additional offset applied along the cross axis between the element and its anchor element. | ||
| defaultOpen | boolean | |
Whether the overlay is open by default (uncontrolled). | ||
| isEntering | boolean | |
Whether the tooltip is currently performing an entry animation. | ||
| isExiting | boolean | |
Whether the tooltip is currently performing an exit animation. | ||
| isOpen | boolean | |
Whether the element is rendered. | ||
| offset | number | 0 |
The additional offset applied along the main axis between the element and its anchor element. | ||
| placement | Placements | |
The placement of the tooltip with respect to the trigger. | ||
| shouldFlip | boolean | true |
Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely. | ||
| triggerRef | RefObject<Element | null> | |
The ref for the element which the tooltip positions itself with respect to. When used within a TooltipTrigger this is set automatically. It is only required when used standalone. | ||