Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Open in

side

sideOffset

align

alignOffset

Installation

Usage

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Open tooltip</TooltipTrigger>
    <TooltipPortal>
      <TooltipContent>
        <p>Tooltip content</p>
      </TooltipContent>
    </TooltipPortal>
  </Tooltip>
</TooltipProvider>

API Reference

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

TooltipContent

Radix UI API Reference - Tooltip.Content

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

The forceMount and asChild properties are not supported in the TooltipContent component, as it is used for animation.

TooltipArrow

Radix UI API Reference - Tooltip.Arrow

Credits

Radix UI Tooltip

Tooltip

On this page