Tooltip

Installation

npx paubha@latest add tooltip

Usage

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

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="secondary">Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>Helpful info</TooltipContent>
  </Tooltip>
</TooltipProvider>

A dark inverted surface (bg-fg-primary background, text-bg-primary text), a deliberate surface inversion, not a mistake. Uses Radix's own Arrow primitive rather than a hand-rolled CSS triangle, since it measures and positions itself correctly across all four sides for free.

TooltipProvider defaults to a 400ms show delay. Content sits on the --z-tooltip layer (above modals, popovers and toasts) and fades in over --duration-fast (100ms, ease-out), instantly under prefers-reduced-motion.

Use a tooltip only for a brief, non-interactive hint. The trigger needs its own accessible name; the tooltip never replaces it. Move long procedures into visible help, and interactive options into a Popover.

Examples

Sides

API reference

Tooltip and TooltipTrigger are direct re-exports of Radix's own primitives. TooltipProvider wraps Radix's provider with a 400ms default delay. See Radix's Tooltip docs for their full prop surface (delayDuration, disableHoverableContent, etc).

TooltipProvider

TooltipContent

Accessibility