Tooltip

A short label that appears on hover or focus to clarify an icon or truncated control.

Live

Install

pnpm dlx shadcn@latest add @namche/tooltip

Usage

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

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Badge>Live</Badge>} />
    <TooltipContent>Healthy across 3 regions, 82ms p50</TooltipContent>
  </Tooltip>
</TooltipProvider>

Tooltip works standalone, but wrap a group of tooltips in TooltipProvider so they share one open/close delay group — TooltipProvider defaults delay to 0, matching this system's preference for immediate feedback over shadcn's usual 700ms. TooltipContent renders its own arrow and defaults to side="top".

Tooltip

Install

Usage

On this page