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

API Reference

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