Tooltip

A short label that names a control, shown on hover and keyboard focus.

Press to try the action.
Fig. 1 Point at or focus the button to see its name.

When to use it

Use Tooltip to name icon buttons and other controls without visible text. Keep it to a few words, and add a shortcut when there is one.

Never put information people need in a tooltip alone: it’s hidden until they find it, and touch screens can’t hover.

TooltipThis page

Names a control.

Press to try the action.

Icon buttons and unlabeled controls.

Hover Card

A peek at a link.

Reviewed by yesterday.

Hover or focus the name to preview the profile.

Previews of people and pages.

Popover

The page stays usable.

Press Esc or click outside to close.

Small changes next to their button.

Fig. 2 Three ways to show more on demand. Point at or focus each one.

How it behaves

Use TooltipProvider once around your app for a shared 400ms hover delay. Nearby tooltips open instantly after the first; keyboard focus is immediate.

Keep an accessible label on each icon button. Tooltips supplement that label and never contain links, buttons, or essential instructions.

Compose TooltipTrigger with render={<Button />}; do not nest buttons. Wrap a disabled button in a span so hover still reaches the trigger.

Base UI handles Escape, pointer dismissal, and collision-aware placement. Touch does not require a tooltip to perform the action.

Content uses semantic foreground/background tokens. Pointer entry uses 125ms opacity and scale; instant states skip animation and reduced motion keeps only opacity. Override className, side, or sideOffset to customize it.

TooltipContent includes Base UI's Arrow, which follows the trigger when placement changes and inherits the popup color. Customize arrowClassName or use showArrow={false} to hide the tail.

Build it

Add it with the shadcn CLI:

Terminal

A complete example. Change the values to fit your product:

tooltip-example.tsx

The full source is yours to edit once installed:

tooltip.tsx