shadcn.io is not affiliated with official shadcn/ui
Installation
bunx --bun shadcn@latest add https://kit.dev/r/aria/tooltip.jsonnpx shadcn@latest add https://kit.dev/r/aria/tooltip.jsonpnpm dlx shadcn@latest add https://kit.dev/r/aria/tooltip.jsonyarn shadcn@latest add https://kit.dev/r/aria/tooltip.jsonInstall the following dependencies:
bun add react-aria-componentsnpm install react-aria-componentspnpm add react-aria-componentsyarn add react-aria-componentsCopy and paste the following code into your project.
"use client";
import {
Children,
type ComponentProps,
type CSSProperties,
isValidElement,
type ReactElement,
type ReactNode,
} from "react";
import {
Focusable,
OverlayArrow,
Tooltip as TooltipPrimitive,
TooltipTrigger as TooltipTriggerPrimitive,
} from "react-aria-components";
import { cn } from "@/lib/utils";
Update the import paths to match your project setup.
Anatomy
TooltipTrigger
TooltipArrow
└── TooltipArrowTip
TooltipContent
└── TooltipPositionerUsage
import { Button } from "@/components/ui/button";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Hover</Button>
</TooltipTrigger>
<TooltipContent>
<p>Add to library</p>
</TooltipContent>
</Tooltip>Accessibility
| Key | Description |
|---|---|
Enter | Activate the focused item. |
Space | Activate the focused control. |
Demos
Sides
Position the tooltip with Ark positioning.placement.
Keyboard
Tooltip with a keyboard shortcut.
Disabled
Show a tooltip on a disabled button by wrapping it with a span.
Rtl
Right-to-left tooltip. See the RTL configuration guide for document direction.
API Reference
Tooltip
PropType
isOpen?booleanAttributeType
CSS variableType
--trigger-anchor-pointstringTooltipTrigger
PropType
AttributeType