Tooltip

A short label shown on hover and keyboard focus.

When to use

Use when: A short label for an icon-only control or a truncated value.
Avoid when: The content is essential or interactive; tooltips don't appear on touch, so use Popover or visible text.

Installation

bunx shelf add tooltip

The source lands in src/components/ui/tooltip.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Tooltip from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";

<Tooltip.Root>
  <Tooltip.Trigger render={<Button size="icon" aria-label="Add" />}><PlusIcon /></Tooltip.Trigger>
  <Tooltip.Content>Add to library</Tooltip.Content>
</Tooltip.Root>

Examples

Sides

The tooltip can open on any side, and flips when there isn't room.

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: foundations, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.