Tooltip

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

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

Installation


pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/tooltip.json

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

<Tooltip>
  <TooltipTrigger>Hover</TooltipTrigger>
  <TooltipContent>
    <p>Add to library</p>
  </TooltipContent>
</Tooltip>

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

Wraps your app to provide global tooltip functionality. Should be placed at the root of your application.

The root component that contains all tooltip parts.

The element that triggers the tooltip.

Prop	Type	Default
`asChild`	`boolean`	`false`

The popup content displayed when the tooltip is open.