Tooltip

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/tooltip

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install react-aria-components tailwind-merge tailwind-variants

Anatomy

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

<Tooltip>
  <TooltipTrigger aria-label="Follow My Twitter">
    <IconBrandX />
  </TooltipTrigger>
  <TooltipContent>Follow me on X @irsyadadl</TooltipContent>
</Tooltip>

Examples

Placement

By default, the tooltip appears at the top, but you can change its position by using the placement prop.

Intent

Tooltip has two intents: default and inverse. You can change the intent by using the intent prop.

Without arrow

You can remove the arrow from the tooltip by setting the arrow prop to false.

Directions

The list above shows the primary directions, but you can also use more specific placements like bottom left or top right. Here are all the available placement options:

Delay

Tooltip rolls out the welcome mat after you hover for 1.5 secs. Wanna speed it up or slow it down? Just slide in a delay prop. Peep these guidelines for the scoop.

Component API

Tooltip

The Tooltip component controls when tooltip content is shown.

TooltipTrigger

The TooltipTrigger component defines the element that opens a tooltip.

TooltipContent

The TooltipContent component renders tooltip content.

See the React Aria for the full API reference.