Tooltip

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

Installation

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.


pnpm dlx shadcn@latest add tooltip

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

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

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

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

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

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

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