Tooltip

When to use

Use a Tooltip to name an icon-only control or add a short hint next to a label. It must never carry information the user needs to complete a task; if the content is interactive, longer than a line, or needs to be readable on touch, use Popover or HoverCard.

Platform notes

Alone among these overlays, tooltip content is an inverted surface (bg-foreground with text-background) rather than --popover, so it needs no border to stand out and the arrow is already included in TooltipContent. Mount a single TooltipProvider in the providers module under app/ rather than per component as the preview does for isolation, and note that delayDuration defaults to 0 in the vendored copy, so tooltips appear immediately unless you raise it. An icon-only button still needs its own accessible name (an sr-only span or aria-label); a tooltip is not a substitute for a label, and both strings are separate react-i18next messages.

Install

npx shadcn@latest add tooltip

Code

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

export function TooltipDemo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">Hover me</Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Themed with our tokens</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Full API

ui.shadcn.com/docs/components/tooltip