Tooltip

A popup that displays information related to an element on hover or focus.

Installation

pnpm dlx shadcn@latest add https://8bit.cnlibs.com/r/tooltip.json

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

<Tooltip>
  <TooltipTrigger render={<Button variant="outline">Hover me</Button>} />
  <TooltipContent>Add to library</TooltipContent>
</Tooltip>

Tooltips are especially useful for labeling icon-only buttons.