GitHub

Go to...

Choose a page to open.

A short label that appears when you hover or focus an element.

Tooltip

tooltip-demo

Installation

pnpm dlx shadcn@latest add https://ui.n2020.com/r/tooltip.json

Usage

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Button variant="outline" />}>Archive</TooltipTrigger>
    <TooltipContent>Move this project to the archive</TooltipContent>
  </Tooltip>
</TooltipProvider>

TooltipProvider removes the open delay for the tooltips inside it. Put one at the root of your app.

Examples

Side

tooltip-side