Tooltip
Tooltips are visual-only floating elements that display information about a trigger element when a user hovers or focuses it.
TooltipArrow API
Import
import * as Tooltip from '@base_ui/react/Tooltip';
const TooltipArrow = Tooltip.Arrow;Props of the native component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| className | func | string | - | Class names applied to the element or a function that returns them based on the component's state. |
| hideWhenUncentered | bool | false | If |
| render | element | func | - | A function to customize rendering of the component. |
ref is forwarded to the root element.Theme default props
You can useTooltipArrow to change the default props of this component with the theme.TooltipPopup API
Import
import * as Tooltip from '@base_ui/react/Tooltip';
const TooltipPopup = Tooltip.Popup;Props of the native component are also available.
| Name | Type | Description |
|---|---|---|
| className | func | string | Class names applied to the element or a function that returns them based on the component's state. |
| render | element | func | A function to customize rendering of the component. |
ref is forwarded to the root element.Theme default props
You can useTooltipPopup to change the default props of this component with the theme.TooltipPositioner API
Import
import * as Tooltip from '@base_ui/react/Tooltip';
const TooltipPositioner = Tooltip.Positioner;Props of the native component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| alignment | 'center' | 'end' | 'start' | 'center' | The alignment of the tooltip popup element to the anchor element along its cross axis. |
| alignmentOffset | number | 0 | The offset of the tooltip popup element along its alignment axis. |
| anchor | HTML element | object | func | - | The element to which the tooltip popup element is anchored to. |
| arrowPadding | number | 5 | Determines the padding between the arrow and the tooltip popup edges. Useful when the tooltip popup element has rounded corners via |
| className | func | string | - | Class names applied to the element or a function that returns them based on the component's state. |
| collisionBoundary | HTML element | Array<HTML element> | string | { height?: number, width?: number, x?: number, y?: number } | 'clippingAncestors' | The boundary that the tooltip popup element should be constrained to. |
| collisionPadding | number | { bottom?: number, left?: number, right?: number, top?: number } | 5 | The padding between the tooltip popup element and the edges of the collision boundary to add whitespace between them to prevent them from touching. |
| container | HTML element | func | - | The container element to which the tooltip positioner is appended to. |
| hideWhenDetached | bool | false | Whether the tooltip popup element is hidden if it appears detached from its anchor element due to the anchor element being clipped (or hidden) from view. |
| keepMounted | bool | false | Whether the tooltip popup remains mounted in the DOM while closed. |
| positionStrategy | 'absolute' | 'fixed' | 'absolute' | The CSS position strategy for positioning the tooltip popup element. |
| render | element | func | - | A function to customize rendering of the component. |
| side | 'bottom' | 'left' | 'right' | 'top' | 'top' | The side of the anchor element that the tooltip popup element should be placed at. |
| sideOffset | number | 0 | The gap between the anchor element and the tooltip popup element. |
| sticky | bool | false | Whether to allow the tooltip to remain stuck in view while the anchor element is scrolled out of view. |
ref is forwarded to the root element.Theme default props
You can useTooltipPositioner to change the default props of this component with the theme.TooltipProvider API
Import
import * as Tooltip from '@base_ui/react/Tooltip';
const TooltipProvider = Tooltip.Provider;Props of the native component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| closeDelay | number | - | The delay in milliseconds until tooltips within the group are closed. |
| delay | number | - | The delay in milliseconds until tooltips within the group are open. |
| timeout | number | 400 | The timeout in milliseconds until the grouping logic is no longer active after the last tooltip in the group has closed. |
TooltipRoot API
Import
import * as Tooltip from '@base_ui/react/Tooltip';
const TooltipRoot = Tooltip.Root;Props of the native component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| animated | bool | true | Whether the tooltip can animate, adding animation-related attributes and allowing for exit animations to play. Useful to disable in tests to remove async behavior. |
| closeDelay | number | 0 | The delay in milliseconds until the tooltip popup is closed. |
| defaultOpen | bool | - | Specifies whether the tooltip is open initially when uncontrolled. |
| delay | number | 600 | The delay in milliseconds until the tooltip popup is opened. |
| delayType | 'hover' | 'rest' | 'rest' | The delay type to use. |
| followCursorAxis | 'both' | 'none' | 'x' | 'y' | 'none' | Determines which axis the tooltip should follow the cursor on. |
| hoverable | bool | true | Whether the user can move their cursor from the trigger to the tooltip popup without it closing. |
| onOpenChange | func | - | Callback fired when the tooltip popup is requested to be opened or closed. Use when controlled. |
| open | bool | - | If |
TooltipTrigger API
Import
import * as Tooltip from '@base_ui/react/Tooltip';
const TooltipTrigger = Tooltip.Trigger;Props of the native component are also available.
| Name | Type | Description |
|---|---|---|
| className | func | string | Class names applied to the element or a function that returns them based on the component's state. |
| render | element | func | A function to customize rendering of the component. |
ref is forwarded to the root element.Theme default props
You can useTooltipTrigger to change the default props of this component with the theme.