Layout UI

Tooltip

Short label that appears on hover or focus. Built on Base UI Tooltip. Styled with bg-primary/text-primary-foreground for high contrast. Wrap usage in TooltipProvider.

Preview

Installation

bash
npx shadcn@latest add @layout/tooltip

Usage

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

Examples

Positioning

Inline help text

Design tokens follow the W3C DTCG format for cross-tool compatibility.

Guidelines for AI agents

Use for brief, supplementary labels on icon buttons, truncated text, and keyboard shortcut hints. Wrap all Tooltip instances in a single TooltipProvider at the layout level (or per section) to share delay settings. TooltipTrigger uses the render prop — pass the trigger element via render={}.

Never

  • Neverput interactive content (buttons, links) inside TooltipContent — use Popover instead
  • Neveruse Tooltip as the sole label for an icon button; always include aria-label on the trigger
  • Neveruse Tooltip for rich content or multi-line descriptions — use HoverCard or Popover
  • Neverrender Tooltip without TooltipProvider; the delay behaviour will be undefined

Tokens consumed

--layout-primary--layout-primary-fg--layout-radius--layout-duration-fast