--- title: Tooltip subtitle: A popup that appears when an element is hovered or focused, showing a hint for sighted users. description: A high-quality, unstyled React tooltip component that appears when an element is hovered or focused, showing a hint for sighted users. --- # Tooltip ## Demo ### Tailwind This example shows how to implement the component using Tailwind CSS. ```tsx /* index.tsx */ import * as React from 'react'; import { Tooltip } from '@base-ui/react/tooltip'; export default function ExampleTooltip() { return (
Bold Italic Underline
); } function ArrowSvg(props: React.ComponentProps<'svg'>) { return ( ); } function BoldIcon(props: React.ComponentProps<'svg'>) { return ( ); } function ItalicIcon(props: React.ComponentProps<'svg'>) { return ( ); } function UnderlineIcon(props: React.ComponentProps<'svg'>) { return ( ); } ``` ### CSS Modules This example shows how to implement the component using CSS Modules. ```css /* index.module.css */ .Panel { display: flex; border: 1px solid var(--color-gray-200); background-color: var(--color-gray-50); border-radius: 0.375rem; padding: 0.125rem; } .Button { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; margin: 0; outline: 0; border: 0; border-radius: 0.25rem; background-color: transparent; color: var(--color-gray-900); user-select: none; &[data-popup-open] { background-color: var(--color-gray-100); } &:focus-visible { background-color: transparent; outline: 2px solid var(--color-blue); outline-offset: -1px; } @media (hover: hover) { &:hover { background-color: var(--color-gray-100); } } &:active { background-color: var(--color-gray-200); } } .Icon { width: 1rem; height: 1rem; } .Popup { box-sizing: border-box; font-size: 0.875rem; line-height: 1.25rem; display: flex; flex-direction: column; padding: 0.25rem 0.5rem; border-radius: 0.375rem; background-color: canvas; transform-origin: var(--transform-origin); transition: transform 150ms, opacity 150ms; &[data-starting-style], &[data-ending-style] { opacity: 0; transform: scale(0.9); } &[data-instant] { transition: none; } @media (prefers-color-scheme: light) { outline: 1px solid var(--color-gray-200); box-shadow: 0 10px 15px -3px var(--color-gray-200), 0 4px 6px -4px var(--color-gray-200); } @media (prefers-color-scheme: dark) { outline: 1px solid var(--color-gray-300); outline-offset: -1px; } } .Arrow { display: flex; &[data-side='top'] { bottom: -8px; rotate: 180deg; } &[data-side='bottom'] { top: -8px; rotate: 0deg; } &[data-side='left'] { right: -13px; rotate: 90deg; } &[data-side='right'] { left: -13px; rotate: -90deg; } } .ArrowFill { fill: canvas; } .ArrowOuterStroke { @media (prefers-color-scheme: light) { fill: var(--color-gray-200); } } .ArrowInnerStroke { @media (prefers-color-scheme: dark) { fill: var(--color-gray-300); } } ``` ```tsx /* index.tsx */ import * as React from 'react'; import { Tooltip } from '@base-ui/react/tooltip'; import styles from './index.module.css'; export default function ExampleTooltip() { return (
Bold Italic Underline
); } function ArrowSvg(props: React.ComponentProps<'svg'>) { return ( ); } function BoldIcon(props: React.ComponentProps<'svg'>) { return ( ); } function ItalicIcon(props: React.ComponentProps<'svg'>) { return ( ); } function UnderlineIcon(props: React.ComponentProps<'svg'>) { return ( ); } ``` ## Usage guidelines - **Prefer using tooltips as visual labels only**: Tooltips should act as supplementary visual labels for sighted mouse and keyboard users. Tooltips alone are not accessible to touch or screen reader users. See [Alternatives to tooltips](/react/components/tooltip.md) for more details. - **Provide an accessible name for the trigger**: Tooltips are visual-only elements and are not a replacement for labeling the trigger. The tooltip's trigger must have an `aria-label` attribute that closely matches the tooltip's content to ensure consistency for screen reader users. ## Anatomy Import the component and assemble its parts: ```jsx title="Anatomy" import { Tooltip } from '@base-ui/react/tooltip'; ; ``` ## Alternatives to tooltips Tooltips should be supplementary popups that provide non-essential clarity in high-density UIs. A user should not miss critical information if they never see a tooltip. Tooltips don't work well with touch input. Unlike mouse pointers with hover capability, there's no easily discoverable way to reveal a tooltip before tapping its trigger on a touch device. iOS doesn't provide a system-standard, touch-friendly tooltip affordance, while Android may show a tooltip on long press. However, on the web, long press is often used to trigger contextual menus in the browser, which can lead to potential conflicts. For this reason, tooltips are disabled on touch devices. ### Infotips Popups that open when hovering an info icon should use [Popover](/react/components/popover.md) with the `openOnHover` prop on the trigger instead of a tooltip. This way, touch users and screen reader users can access the content. To know when to reach for a popover instead of a tooltip, consider the **purpose** of the trigger element: If the trigger's purpose is to open the popup itself, it's a popover. If the trigger's purpose is unrelated to opening the popup, it's a tooltip. ### Description text Tooltips are designed for sighted users and are not a reliable way to deliver important information to touch users or assistive technologies. If the description is important to understanding the element, don't hide it behind a tooltip — use inline text or [Popover](/react/components/popover.md) if space is limited, so the information is accessible to everyone. Since tooltips serve sighted mouse and keyboard users, iconography should clearly communicate the purpose of icon-only triggers, especially on mobile where the text label may not be visible. If the description is not critical, a tooltip can still be used to provide extra clarity for sighted mouse or keyboard users. ### Contextual feedback messages Use the Toast component's [anchoring ability](/react/components/toast.md) for more ergonomic DX, to ensure the message is announced to screen readers, and to support complex content. ## Examples ### Detached triggers A tooltip can be controlled by a trigger located either inside or outside the `` component. For simple, one-off interactions, place the `` inside ``, as shown in the example at the top of this page. However, if defining the tooltip's content next to its trigger is not practical, you can use a detached trigger. This involves placing the `` outside of `` and linking them with a `handle` created by the `Tooltip.createHandle()` function. ```jsx title="Detached triggers" {3,5} "handle={demoTooltip}" const demoTooltip = Tooltip.createHandle(); Button ... ``` ## Demo ### Tailwind This example shows how to implement the component using Tailwind CSS. ```tsx /* index.tsx */ 'use client'; import * as React from 'react'; import { Tooltip } from '@base-ui/react/tooltip'; import { ArrowSvg, InfoIcon } from './icons-tw'; const demoTooltip = Tooltip.createHandle(); export default function TooltipDetachedTriggersSimpleDemo() { return ( This is a detached tooltip ); } ``` ```tsx /* icons-tw.tsx */ import * as React from 'react'; export function ArrowSvg(props: React.ComponentProps<'svg'>) { return ( ); } export function InfoIcon(props: React.ComponentProps<'svg'>) { return ( ); } export function HelpIcon(props: React.ComponentProps<'svg'>) { return ( ); } export function AlertIcon(props: React.ComponentProps<'svg'>) { return ( ); } ``` ### CSS Modules This example shows how to implement the component using CSS Modules. ```tsx /* index.tsx */ 'use client'; import * as React from 'react'; import { Tooltip } from '@base-ui/react/tooltip'; import styles from './demos.module.css'; const demoTooltip = Tooltip.createHandle(); export default function TooltipDetachedTriggersSimpleDemo() { return ( This is a detached tooltip ); } function ArrowSvg(props: React.ComponentProps<'svg'>) { return ( ); } function InfoIcon(props: React.ComponentProps<'svg'>) { return ( ); } ``` ```css /* demos.module.css */ .Container { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; } .ButtonGroup { display: flex; } .IconButton { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; margin: 0; outline: 0; border: 1px solid var(--color-gray-200); background-color: var(--color-gray-50); color: var(--color-gray-900); user-select: none; &[data-popup-open] { background-color: var(--color-gray-100); } &:focus-visible { outline: 2px solid var(--color-blue); outline-offset: -1px; } @media (hover: hover) { &:hover { background-color: var(--color-gray-100); } } &:active { background-color: var(--color-gray-100); } &:only-child { border-radius: 0.375rem; } &:first-child:not(:only-child) { border-radius: 0.375rem 0 0 0.375rem; } &:last-child:not(:only-child) { border-radius: 0 0.375rem 0.375rem 0; } &:not(:first-child) { border-left: none; } } .Icon { width: 1.25rem; height: 1.25rem; } .Positioner { height: var(--positioner-height); width: var(--positioner-width); max-width: var(--available-width); } .Popup { box-sizing: border-box; font-size: 0.875rem; line-height: 1.25rem; padding: 0.25rem 0.5rem; border-radius: 0.375rem; background-color: canvas; transform-origin: var(--transform-origin); transition: transform 150ms, opacity 150ms; &[data-starting-style], &[data-ending-style] { opacity: 0; transform: scale(0.9); } &[data-instant] { transition: none; } @media (prefers-color-scheme: light) { outline: 1px solid var(--color-gray-200); box-shadow: 0 10px 15px -3px var(--color-gray-200), 0 4px 6px -4px var(--color-gray-200); } @media (prefers-color-scheme: dark) { outline: 1px solid var(--color-gray-300); outline-offset: -1px; } } .Arrow { display: flex; &[data-side='top'] { bottom: -8px; rotate: 180deg; } &[data-side='bottom'] { top: -8px; rotate: 0deg; } &[data-side='left'] { right: -13px; rotate: 90deg; } &[data-side='right'] { left: -13px; rotate: -90deg; } } .ArrowFill { fill: canvas; } .ArrowOuterStroke { @media (prefers-color-scheme: light) { fill: var(--color-gray-200); } } .ArrowInnerStroke { @media (prefers-color-scheme: dark) { fill: var(--color-gray-300); } } .Button { box-sizing: border-box; display: flex; align-items: center; justify-content: center; height: 2.5rem; padding: 0 0.875rem; margin: 0; outline: 0; border: 1px solid var(--color-gray-200); border-radius: 0.375rem; background-color: var(--color-gray-50); font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1.5rem; color: var(--color-gray-900); user-select: none; @media (hover: hover) { &:hover { background-color: var(--color-gray-100); } } &:active { background-color: var(--color-gray-100); } &:focus-visible { outline: 2px solid var(--color-blue); outline-offset: -1px; } } ``` ### Multiple triggers A single tooltip can be opened by multiple trigger elements. You can achieve this by using the same `handle` for several detached triggers, or by placing multiple `` components inside a single ``. ```jsx title="Multiple triggers within the Root part" Trigger 1 Trigger 2 ... ``` ```jsx title="Multiple detached triggers" const demoTooltip = Tooltip.createHandle(); Trigger 1 Trigger 2 ... ``` The tooltip can render different content depending on which trigger opened it. This is achieved by passing a `payload` to the `` and using the function-as-a-child pattern in ``. The payload can be strongly typed by providing a type argument to the `createHandle()` function: ```jsx title="Detached triggers with payload" {1,3,7} "payload" const demoTooltip = Tooltip.createHandle<{ text: string }>(); Trigger 1 Trigger 2 {({ payload }) => ( {payload !== undefined && ( Tooltip opened by {payload.text} )} )} ``` ### Controlled mode with multiple triggers You can control the tooltip's open state externally using the `open` and `onOpenChange` props on ``. This allows you to manage the tooltip's visibility based on your application's state. When using multiple triggers, you have to manage which trigger is active with the `triggerId` prop on `` and the `id` prop on each ``. Note that there is no separate `onTriggerIdChange` prop. Instead, the `onOpenChange` callback receives an additional argument, `eventDetails`, which contains the trigger element that initiated the state change. ## Demo ### Tailwind This example shows how to implement the component using Tailwind CSS. ```tsx /* index.tsx */ 'use client'; import * as React from 'react'; import { Tooltip } from '@base-ui/react/tooltip'; import { ArrowSvg, InfoIcon } from './icons-tw'; const demoTooltip = Tooltip.createHandle(); export default function TooltipDetachedTriggersControlledDemo() { const [open, setOpen] = React.useState(false); const [triggerId, setTriggerId] = React.useState(null); const handleOpenChange = (isOpen: boolean, eventDetails: Tooltip.Root.ChangeEventDetails) => { setOpen(isOpen); setTriggerId(eventDetails.trigger?.id ?? null); }; return (
Controlled tooltip ); } ``` ```tsx /* icons-tw.tsx */ import * as React from 'react'; export function ArrowSvg(props: React.ComponentProps<'svg'>) { return ( ); } export function InfoIcon(props: React.ComponentProps<'svg'>) { return ( ); } export function HelpIcon(props: React.ComponentProps<'svg'>) { return ( ); } export function AlertIcon(props: React.ComponentProps<'svg'>) { return ( ); } ``` ### CSS Modules This example shows how to implement the component using CSS Modules. ```tsx /* index.tsx */ 'use client'; import * as React from 'react'; import { Tooltip } from '@base-ui/react/tooltip'; import styles from './demos.module.css'; const demoTooltip = Tooltip.createHandle(); export default function TooltipDetachedTriggersControlledDemo() { const [open, setOpen] = React.useState(false); const [triggerId, setTriggerId] = React.useState(null); const handleOpenChange = (isOpen: boolean, eventDetails: Tooltip.Root.ChangeEventDetails) => { setOpen(isOpen); setTriggerId(eventDetails.trigger?.id ?? null); }; return (
Controlled tooltip ); } function ArrowSvg(props: React.ComponentProps<'svg'>) { return ( ); } function InfoIcon(props: React.ComponentProps<'svg'>) { return ( ); } ``` ```css /* demos.module.css */ .Container { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; } .ButtonGroup { display: flex; } .IconButton { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; margin: 0; outline: 0; border: 1px solid var(--color-gray-200); background-color: var(--color-gray-50); color: var(--color-gray-900); user-select: none; &[data-popup-open] { background-color: var(--color-gray-100); } &:focus-visible { outline: 2px solid var(--color-blue); outline-offset: -1px; } @media (hover: hover) { &:hover { background-color: var(--color-gray-100); } } &:active { background-color: var(--color-gray-100); } &:only-child { border-radius: 0.375rem; } &:first-child:not(:only-child) { border-radius: 0.375rem 0 0 0.375rem; } &:last-child:not(:only-child) { border-radius: 0 0.375rem 0.375rem 0; } &:not(:first-child) { border-left: none; } } .Icon { width: 1.25rem; height: 1.25rem; } .Positioner { height: var(--positioner-height); width: var(--positioner-width); max-width: var(--available-width); } .Popup { box-sizing: border-box; font-size: 0.875rem; line-height: 1.25rem; padding: 0.25rem 0.5rem; border-radius: 0.375rem; background-color: canvas; transform-origin: var(--transform-origin); transition: transform 150ms, opacity 150ms; &[data-starting-style], &[data-ending-style] { opacity: 0; transform: scale(0.9); } &[data-instant] { transition: none; } @media (prefers-color-scheme: light) { outline: 1px solid var(--color-gray-200); box-shadow: 0 10px 15px -3px var(--color-gray-200), 0 4px 6px -4px var(--color-gray-200); } @media (prefers-color-scheme: dark) { outline: 1px solid var(--color-gray-300); outline-offset: -1px; } } .Arrow { display: flex; &[data-side='top'] { bottom: -8px; rotate: 180deg; } &[data-side='bottom'] { top: -8px; rotate: 0deg; } &[data-side='left'] { right: -13px; rotate: 90deg; } &[data-side='right'] { left: -13px; rotate: -90deg; } } .ArrowFill { fill: canvas; } .ArrowOuterStroke { @media (prefers-color-scheme: light) { fill: var(--color-gray-200); } } .ArrowInnerStroke { @media (prefers-color-scheme: dark) { fill: var(--color-gray-300); } } .Button { box-sizing: border-box; display: flex; align-items: center; justify-content: center; height: 2.5rem; padding: 0 0.875rem; margin: 0; outline: 0; border: 1px solid var(--color-gray-200); border-radius: 0.375rem; background-color: var(--color-gray-50); font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1.5rem; color: var(--color-gray-900); user-select: none; @media (hover: hover) { &:hover { background-color: var(--color-gray-100); } } &:active { background-color: var(--color-gray-100); } &:focus-visible { outline: 2px solid var(--color-blue); outline-offset: -1px; } } ``` ### Animating the Tooltip You can animate a tooltip as it moves between different trigger elements. This includes animating its position, size, and content. #### Position and Size To animate the tooltip's position, apply CSS transitions to the `left`, `right`, `top`, and `bottom` properties of the **Positioner** part. To animate its size, transition the `width` and `height` of the **Popup** part. #### Content The tooltip also supports content transitions. This is useful when different triggers display different content within the same tooltip. To enable content animations, wrap the content in the `` part. This part provides features to create direction-aware animations. It renders a `div` with a `data-activation-direction` attribute (`left`, `right`, `up`, or `down`) that indicates the new trigger's position relative to the previous one. Inside the ``, the content is further wrapped in `div`s with data attributes to help with styling: - `data-current`: The currently visible content when no transitions are present or the incoming content. - `data-previous`: The outgoing content during a transition. You can use these attributes to style the enter and exit animations. ## Demo ### Tailwind This example shows how to implement the component using Tailwind CSS. ```tsx /* index.tsx */ 'use client'; import * as React from 'react'; import { Tooltip } from '@base-ui/react/tooltip'; import { ArrowSvg, InfoIcon, HelpIcon, AlertIcon } from './icons-tw'; const demoTooltip = Tooltip.createHandle(); export default function TooltipDetachedTriggersFullDemo() { return (
{({ payload: Payload }) => ( {Payload !== undefined && } )} ); } function InfoContent() { return This is information about the feature; } function HelpContent() { return Need help?; } function AlertContent() { return Warning: This action cannot be undone; } ``` ```tsx /* icons-tw.tsx */ import * as React from 'react'; export function ArrowSvg(props: React.ComponentProps<'svg'>) { return ( ); } export function InfoIcon(props: React.ComponentProps<'svg'>) { return ( ); } export function HelpIcon(props: React.ComponentProps<'svg'>) { return ( ); } export function AlertIcon(props: React.ComponentProps<'svg'>) { return ( ); } ``` ### CSS Modules This example shows how to implement the component using CSS Modules. ```css /* index.module.css */ .Container { display: flex; } .ButtonGroup { display: flex; } .Button { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; margin: 0; outline: 0; border: 1px solid var(--color-gray-200); background-color: var(--color-gray-50); color: var(--color-gray-900); font-weight: 700; user-select: none; &[data-popup-open] { background-color: var(--color-gray-100); } &:focus-visible { outline: 2px solid var(--color-blue); outline-offset: -1px; } @media (hover: hover) { &:hover { background-color: var(--color-gray-100); } } &:active { background-color: var(--color-gray-100); } &:only-child { border-radius: 0.375rem; } &:first-child:not(:only-child) { border-radius: 0.375rem 0 0 0.375rem; } &:last-child:not(:only-child) { border-radius: 0 0.375rem 0.375rem 0; } &:not(:first-child) { border-left: none; } } .Icon { width: 1.25rem; height: 1.25rem; } .Positioner { height: var(--positioner-height); width: var(--positioner-width); max-width: var(--available-width); transition: top 0.35s cubic-bezier(0.22, 1, 0.36, 1), left 0.35s cubic-bezier(0.22, 1, 0.36, 1), right 0.35s cubic-bezier(0.22, 1, 0.36, 1), bottom 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); &[data-instant] { transition: none; } } .Popup { position: relative; height: var(--popup-height, auto); width: var(--popup-width, auto); max-width: 500px; transform-origin: var(--transform-origin); border-radius: 0.375rem; background-color: canvas; font-size: 0.875rem; line-height: 1.25rem; transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), height 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); &[data-starting-style], &[data-ending-style] { opacity: 0; transform: scale(0.9); } &[data-instant] { transition: none; } @media (prefers-color-scheme: light) { outline: 1px solid var(--color-gray-200); box-shadow: 0 10px 15px -3px var(--color-gray-200), 0 4px 6px -4px var(--color-gray-200); } @media (prefers-color-scheme: dark) { outline: 1px solid var(--color-gray-300); outline-offset: -1px; } } .Arrow { display: flex; transition: left 0.35s cubic-bezier(0.22, 1, 0.36, 1); &[data-instant] { transition: none; } &[data-side='top'] { bottom: -8px; rotate: 180deg; } &[data-side='bottom'] { top: -8px; rotate: 0deg; } &[data-side='left'] { right: -13px; rotate: 90deg; } &[data-side='right'] { left: -13px; rotate: -90deg; } } .ArrowFill { fill: canvas; } .ArrowOuterStroke { @media (prefers-color-scheme: light) { fill: var(--color-gray-200); } } .ArrowInnerStroke { @media (prefers-color-scheme: dark) { fill: var(--color-gray-300); } } .Viewport { --viewport-inline-padding: 0.5rem; box-sizing: border-box; position: relative; height: 100%; width: 100%; overflow: clip; padding: 0.25rem var(--viewport-inline-padding); [data-previous], [data-current] { width: calc(var(--popup-width) - 2 * var(--viewport-inline-padding)); translate: 0; opacity: 1; transition: translate 350ms cubic-bezier(0.22, 1, 0.36, 1), opacity 175ms cubic-bezier(0.22, 1, 0.36, 1); [data-instant] & { transition: none; } } &[data-activation-direction~='left'] [data-current][data-starting-style] { translate: -50% 0; opacity: 0; } &[data-activation-direction~='right'] [data-current][data-starting-style] { translate: 50% 0; opacity: 0; } &[data-activation-direction~='left'] [data-previous][data-ending-style] { translate: 50% 0; opacity: 0; } &[data-activation-direction~='right'] [data-previous][data-ending-style] { translate: -50% 0; opacity: 0; } } ``` ```tsx /* index.tsx */ 'use client'; import * as React from 'react'; import { Tooltip } from '@base-ui/react/tooltip'; import styles from './index.module.css'; const demoTooltip = Tooltip.createHandle(); export default function TooltipDetachedTriggersFullDemo() { return (
{({ payload: Payload }) => ( {Payload !== undefined && } )} ); } function InfoContent() { return This is information about the feature; } function HelpContent() { return Need help?; } function AlertContent() { return Warning: This action cannot be undone; } function ArrowSvg(props: React.ComponentProps<'svg'>) { return ( ); } function InfoIcon(props: React.ComponentProps<'svg'>) { return ( ); } function HelpIcon(props: React.ComponentProps<'svg'>) { return ( ); } function AlertIcon(props: React.ComponentProps<'svg'>) { return ( ); } ``` ## API reference ### Provider Provides a shared delay for multiple tooltips. The grouping logic ensures that once a tooltip becomes visible, the adjacent tooltips will be shown instantly. **Provider Props:** | Prop | Type | Default | Description | | :--------- | :---------- | :------ | :------------------------------------------------------------------------------------------------------------------------ | | delay | `number` | - | How long to wait before opening a tooltip. Specified in milliseconds. | | closeDelay | `number` | - | How long to wait before closing a tooltip. Specified in milliseconds. | | timeout | `number` | `400` | Another tooltip will open instantly if the previous tooltip is closed within this timeout. Specified in milliseconds. | | children | `ReactNode` | - | - | ### Root Groups all parts of the tooltip. Doesn’t render its own HTML element. **Root Props:** | Prop | Type | Default | Description | | :------------------------------------------------------- | :------------------------------------------------------------------------- | :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | defaultOpen | `boolean` | `false` | Whether the tooltip is initially open.To render a controlled tooltip, use the `open` prop instead. | | open | `boolean` | - | Whether the tooltip is currently open. | | onOpenChange | `((open: boolean, eventDetails: Tooltip.Root.ChangeEventDetails) => void)` | - | Event handler called when the tooltip is opened or closed. | | actionsRef | `RefObject` | - | A ref to imperative actions.\* `unmount`: Unmounts the tooltip popup. | | \* `close`: Closes the tooltip imperatively when called. | | defaultTriggerId | `string \| null` | - | ID of the trigger that the tooltip is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open tooltip. | | handle | `Tooltip.Handle` | - | A handle to associate the tooltip with a trigger. If specified, allows external triggers to control the tooltip's open state. Can be created with the Tooltip.createHandle() method. | | onOpenChangeComplete | `((open: boolean) => void)` | - | Event handler called after any animations complete when the tooltip is opened or closed. | | triggerId | `string \| null` | - | ID of the trigger that the tooltip is associated with. This is useful in conjunction with the `open` prop to create a controlled tooltip. There's no need to specify this prop when the tooltip is uncontrolled (i.e. when the `open` prop is not set). | | trackCursorAxis | `'none' \| 'x' \| 'y' \| 'both'` | `'none'` | Determines which axis the tooltip should track the cursor on. | | disabled | `boolean` | `false` | Whether the tooltip is disabled. | | disableHoverablePopup | `boolean` | `false` | Whether the tooltip contents can be hovered without closing the tooltip. | | children | `ReactNode \| PayloadChildRenderFunction` | - | The content of the tooltip. This can be a regular React node or a render function that receives the `payload` of the active trigger. | ### Trigger An element to attach the tooltip to. Renders a `