Core ElementsFree

Tooltip

A short label shown on hover, in any of 4 directions.

Usage

bash

npx wunderui-cli add tooltip

Writes the source into your project with its dependencies and, on first use, the styles — see Installation.

Then import what you need:

tsx

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

The tooltip opens above its trigger — hover the button.

The tooltip opens below its trigger — hover the button.

The tooltip opens to the left of its trigger — hover the button.

The tooltip opens to the right of its trigger — hover the button.

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

The overlapping faces stay compact; hovering one tells you who it is, without a legend taking up room.

AL

JW

MC

TB

LW

SO

A short explanation above a control, shown on hover or keyboard focus — for anything whose label alone does not say enough.