Yami

Tooltip

A popup that displays information related to an element.

Installation

Add the tooltip component with the shadcn CLI.

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

Usage

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

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

Examples

Default

Code

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

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