Tooltip

A popup that appears when an element is hovered or focused, showing a hint for sighted users.

Open in

followCursor

side

sideOffset

align

alignOffset

Installation

Usage

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Open tooltip</TooltipTrigger>
    <TooltipPortal>
      <TooltipPositioner>
        <TooltipPopup>
          <p>Tooltip content</p>
        </TooltipPopup>
      </TooltipPositioner>
    </TooltipPortal>
  </Tooltip>
</TooltipProvider>

API Reference

TooltipProvider

Base UI API Reference - Tooltip.Provider Base UI API Reference - Tooltip.Root

Prop	Type	Default
`followCursor?`	`boolean \| "x" \| "y"`	`false`
`followCursorSpringOptions?`	`SpringOptions`	`{ stiffness: 200, damping: 17 }`

TooltipTrigger

Base UI API Reference - Tooltip.Trigger

TooltipPortal

Base UI API Reference - Tooltip.Portal

The keepMounted property is not supported in the TooltipPortal component, as it is used for animation.

TooltipPositioner

Base UI API Reference - Popover.Positioner

TooltipPopup

Base UI API Reference - Tooltip.Popup

Prop	Type	Default
`transition?`	`Transition`	`{ type: 'spring', stiffness: 300, damping: 25 }`
`...props?`	`HTMLMotionProps<"div">`	-

The render property is not supported in the TooltipPopup component, as it is used for animation.

TooltipArrow

Base UI API Reference - Tooltip.Arrow

Credits

Base UI Tooltip

Tooltip

On this page