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 https://anotherui.dev/r/tooltip.json

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 { FloppyDiskIcon } from "@phosphor-icons/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, see the RTL configuration guide.

"use client"

import {

See the React Aria Tooltip documentation.

On This Page