Tooltip

A popup that displays information related to an element.

Installation

Add the tooltip component with the shadcn CLI.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/tooltip.json

Usage

tsx

import { Tooltip } from "@/components/ui/tooltip"

Examples

Default

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

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