Tooltip

A label that provides information on hover or focus.

You can explore the tooltip component in the following curated examples.

Popover with Tooltip

Render a Popover with a Tooltip that shows upon hovering over the Popover Trigger.

Slider with Tooltip

Render a Slider with a Tooltip that shows the current value of the Slider.

Tooltip with following cursor

Render a Tooltip that follows the cursor when hovering over the target element.

Dialog with Tooltip

Render a Dialog with a Tooltip that shows upon hovering over the Dialog Trigger.

Anatomy

<Tooltip.Root>
  <Tooltip.Trigger />
  <Tooltip.Positioner>
    <Tooltip.Arrow>
      <Tooltip.ArrowTip />
    </Tooltip.Arrow>
    <Tooltip.Content />
  </Tooltip.Positioner>
</Tooltip.Root>

Examples

Controlled

To create a controlled Tooltip component, manage the state of whether the tooltip is open using the open prop:

Root Provider

An alternative way to control the tooltip is to use the RootProvider component and the useTooltip hook. This way you can access the state and methods from outside the component.

Arrow

To display an arrow pointing to the trigger from the tooltip, use the Tooltip.Arrow and Tooltip.ArrowTip components:

Delay

To configure the open and close delay for the Tooltip, use the closeDelay and openDelay props:

Positioning

To customize the position of the Tooltip relative to the trigger, use the positioning prop:

Context

For more control over the Tooltip's functionality, you can use Tooltip.Context to access the Tooltip API:

Within Fixed Containers

When rendering a tooltip inside a fixed-position container, set positioning.strategy to "fixed" to ensure proper positioning.

API Reference

Props

Root

Prop	Default	Type
`aria-label`		`string` Custom label for the tooltip.
`closeDelay`	`150`	`number` The close delay of the tooltip.
`closeOnClick`	`true`	`boolean` Whether the tooltip should close on click
`closeOnEscape`	`true`	`boolean` Whether to close the tooltip when the Escape key is pressed.
`closeOnPointerDown`	`true`	`boolean` Whether to close the tooltip on pointerdown.
`closeOnScroll`	`true`	`boolean` Whether the tooltip should close on scroll
`defaultOpen`		`boolean` The initial open state of the tooltip when rendered. Use when you don't need to control the open state of the tooltip.
`disabled`		`boolean` Whether the tooltip is disabled
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ trigger: string; content: string; arrow: string; positioner: string }>` The ids of the elements in the tooltip. Useful for composition.
`immediate`		`boolean` Whether to synchronize the present change immediately or defer it to the next frame
`interactive`	`false`	`boolean` Whether the tooltip's content is interactive. In this mode, the tooltip will remain open when user hovers over the content.
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`onExitComplete`		`VoidFunction` Function called when the animation ends in the closed state
`onOpenChange`		`(details: OpenChangeDetails) => void` Function called when the tooltip is opened.
`open`		`boolean` The controlled open state of the tooltip
`openDelay`	`400`	`number` The open delay of the tooltip.
`positioning`		`PositioningOptions` The user provided options used to position the popover content
`present`		`boolean` Whether the node is present (controlled by the user)
`skipAnimationOnMount`	`false`	`boolean` Whether to allow the initial presence animation.
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.

Arrow

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

CSS Variable	Description
`--arrow-size`	The size of the arrow
`--arrow-size-half`	Half the size of the arrow
`--arrow-background`	Use this variable to style the arrow background
`--arrow-offset`	The offset position of the arrow

ArrowTip

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Content

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Attribute	Description
`[data-scope]`	tooltip
`[data-part]`	content
`[data-state]`	"open" \| "closed"
`[data-placement]`	The placement of the content

Positioner

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

CSS Variable	Description
`--reference-width`	The width of the reference element
`--reference-height`	The height of the root
`--available-width`	The available width in viewport
`--available-height`	The available height in viewport
`--x`	The x position for transform
`--y`	The y position for transform
`--z-index`	The z-index value
`--transform-origin`	The transform origin for animations

RootProvider

Prop	Default	Type
`value`		`UseTooltipReturn`
`immediate`		`boolean` Whether to synchronize the present change immediately or defer it to the next frame
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`onExitComplete`		`VoidFunction` Function called when the animation ends in the closed state
`present`		`boolean` Whether the node is present (controlled by the user)
`skipAnimationOnMount`	`false`	`boolean` Whether to allow the initial presence animation.
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.

Trigger

Renders a <button> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Attribute	Description
`[data-scope]`	tooltip
`[data-part]`	trigger
`[data-expanded]`	Present when expanded
`[data-state]`	"open" \| "closed"

Context

API

Property	Type
`open`	`boolean` Whether the tooltip is open.
`setOpen`	`(open: boolean) => void` Function to open the tooltip.
`reposition`	`(options?: Partial<PositioningOptions>) => void` Function to reposition the popover

Accessibility

Complies with the Tooltip WAI-ARIA design pattern.

Keyboard Support

Key	Description
`Tab`	Opens/closes the tooltip without delay.
`Escape`	If open, closes the tooltip without delay.