Tooltip

Install

npx shadcn@latest add https://plinth.dhrumilkherde.com/r/tooltip.json

Usage

Wrap a section of your app (or the whole app) in TooltipProvider once; grouped tooltips then share delay behavior, so moving between triggers feels instant.

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

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Button size="icon" aria-label="Bold" />} />
    <TooltipContent>Bold (⌘B)</TooltipContent>
  </Tooltip>
</TooltipProvider>

Placement

Props

TooltipContent: side (top · right · bottom · left, default top), sideOffset (default 6). Root accepts Base UI Tooltip props (delay, open, onOpenChange).

Accessibility

• Opens on keyboard focus as well as hover, and closes on Escape.
• Use only for supplementary hints; never put information that exists nowhere else in a tooltip, and always label icon buttons with aria-label too.