Design system

Tooltip

A short, non-interactive label or hint shown on hover and keyboard focus.

Tooltips clarify unfamiliar icon buttons or reveal a shortcut. They supplement an accessible name; they do not replace one.

Built on Radix TooltipUpstream API

Import

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

Composition

Wrap a group of tooltips in one TooltipProvider. Use TooltipTrigger asChild around the existing control so there is only one focus target. TooltipContent may include a Kbd for a shortcut, but it should not contain interactive controls.

Accessibility

Give icon-only buttons an aria-label because tooltip content may be unavailable to some assistive technology and touch users. The primitive opens on focus as well as hover and dismisses with Escape.

Best practices

  • Write a brief label or one-line hint.
  • Do not hide errors, required instructions, or essential state in a tooltip.
  • Prefer visible text when space allows.