Tooltip

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

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

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