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, TooltipTrigger } from "@/components/ui/tooltip"

Installation


pnpm dlx shadcn@latest add tooltip

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

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

Use the following composition to build a Tooltip:

TooltipTrigger
├── Button
└── Tooltip

Use the placement prop to change the position of the tooltip.

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

import { SaveIcon } from "lucide-react"

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

Show a tooltip on a disabled button by wrapping it with a span.

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

To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import {

See the React Aria Tooltip documentation.

On This Page

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.