Tooltip

A popup that displays information related to an element when focused or hovered.

overlayinteractive

Loading preview...

Installation

npx baseui-cn add tooltip

Usage

import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip"

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover me</TooltipTrigger>
    <TooltipContent>Save document</TooltipContent>
  </Tooltip>
</TooltipProvider>

Note: Wrap multiple tooltips in one TooltipProvider for instant switching between them with no delay gap.

Examples

Basic

A simple tooltip.

Loading preview...

Placement

Tooltips on all four sides.

Loading preview...

With shortcut

Include a keyboard shortcut.

Loading preview...

Delay group

Multiple tooltips sharing one provider.

Loading preview...

API

TooltipContent

Prop	Type	Default	Description
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"top"`	Side of the trigger the tooltip appears on
`sideOffset`	`number`	`4`	Distance in px between the tooltip and the trigger
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment relative to the trigger
`alignOffset`	`number`	`0`	Offset in px along the alignment axis

positionerProps forwards native Base UI Positioner options, including anchor, collision boundaries/padding, positioning method and refs. Options supplied there override the convenience positioning props above.

API Reference

See the Base UI Tooltip documentation for the full API reference, including all props, data attributes, and CSS classes.