Tooltip

InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @videorc/tooltip

UsageCopy Anchor Link

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

<Tooltip>
  <TooltipTrigger
    render={<Button aria-label="Keep on top" size="icon" variant="ghost" />}
  >
    <PinIcon />
  </TooltipTrigger>
  <TooltipContent>Keep on top</TooltipContent>
</Tooltip>

Mount one TooltipProvider around each window. Tooltips under it share a delay group: once one is open, moving to the next opens it at once. A tooltip outside every provider still works, with its trigger's own 600 ms.

AnatomyCopy Anchor Link

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger />
    <TooltipContent />
  </Tooltip>
</TooltipProvider>

ExamplesCopy Anchor Link

With a shortcutCopy Anchor Link

Put a Shortcut keys chip after the label to show the bound shortcut. The tooltip tightens its end padding around the chip.

ThemingCopy Anchor Link

KeyboardCopy Anchor Link

AccessibilityCopy Anchor Link

A tooltip is never the only place a fact lives, and title= is not an information channel. An icon-only trigger still needs its own aria-label: the tooltip repeats the name for sighted users. A disabled control takes no hover, so explain it with Disabled reason.

API referenceCopy Anchor Link

Every Base UI Tooltip prop, plus:

TooltipProviderCopy Anchor Link

TooltipContentCopy Anchor Link