Skip to content
Aback UI

Overlays

Tooltip

A short label for icon-only or ambiguous controls.

StableNew shared patternRegistry JSON (opens in a new tab)

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add tooltip

Writes components/ui/tooltip.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Usage

Import the parts you need from the installed file. The Code tab above has a complete, working example.

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

API reference

Props and composition points for Tooltip. Native element props pass through.

PropTypeDefaultDescription
delayDurationnumber200Milliseconds before the tooltip appears.
side / align / sideOffsetRadix placement propssideOffset="6"Position relative to the trigger.
TooltipContentcomponentNoneThe short label. Render through a portal so it escapes overflow.

Dependencies: radix-ui, plus the shared @/lib/utils helper.

Accessibility

Semantics, keyboard behavior, and the decisions that keep the component operable.

  • The tooltip is supplementary. The trigger still needs its own accessible name.
  • Focus or hover reveals it, and Escape dismisses it without moving focus.
  • Never put interactive content or essential instructions in a tooltip.
  • Keep the label short and match the visible action verb.

Keyboard

KeyAction
TabFocus the trigger and reveal the tooltip.
EscapeDismiss the tooltip while focus stays on the trigger.

Used in production

The Aback products whose interfaces shaped this component.

This component is new in Aback UI. It has not shipped in an Aback product yet, so no production use is claimed.

Related