Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

shadcn/ui docs →

Preview

Installation

terminal
$
Other package managers 
bunx --bun shadcn@latest add https://trents.tech/r/tooltip.json

Dependencies: @radix-ui/react-tooltip

Usage

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

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="neutral">Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>This is a tooltip</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>
0