Components

Tooltip

Contextual help revealed on hover or focus. Never place critical information here — it must be discoverable.

Updated Jul 8, 2026 by Leonardo Posada

Basic

<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline" size="icon" aria-label="Add">
      <Plus weight="light" />
    </Button>
  </TooltipTrigger>
  <TooltipContent>Create new rule</TooltipContent>
</Tooltip>

When to use

  • Explain an icon-only button.
  • Give context to a truncated label.
  • Short definitions of technical terms.

When not to use

  • Critical info the user must see — must be visible, not hidden.
  • Long content — use Popover.
  • Mobile-only prototypes — hover doesn't exist there.

Usage

Do
  • Wrap the app with <TooltipProvider> once at layout level.
  • Keep tooltip text under 8 words.
  • Always pair icon-only buttons with a tooltip AND aria-label.
Don't
  • Don't put actionable elements inside a Tooltip.
  • Don't use Tooltip on touch-only surfaces.

Setup

TooltipProvider
The layout of this kit already wraps <TooltipProvider> globally. In your own project, mount it once in the root layout.