Core ElementsFree

Tooltip

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

Usage

bash

npm install @wunderui/react

Then import what you need:

tsx

import { Tooltip, TooltipContent, TooltipTrigger } from "@wunderui/react"

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.