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 cn tailwind-variants
Anatomy
import { Button } from "@/components/ui/button"
import { Tooltip, TooltipTrigger } from "@/components/ui/tooltip"<TooltipTrigger>
<Button intent="outline">Follow me</Button>
<Tooltip>Follow me on X @irsyadadl</Tooltip>
</TooltipTrigger>TooltipTrigger wraps a focusable trigger, such as Button, and the Tooltip content. Set timing and open-state props on TooltipTrigger, and placement and appearance props on Tooltip.
Examples
Placement
By default, the tooltip appears at the top, but you can change its position by setting the placement prop on Tooltip.
Inverse
Set inverse on Tooltip to use a foreground background with contrasting text. By default, inverse is false.
Without arrow
You can remove the arrow from the tooltip by setting arrow={false} on Tooltip.
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:
| Primary Direction | Placement |
|---|---|
bottom | bottom, bottom left, bottom right, bottom start, bottom end |
top | top, top left, top right, top start, top end |
left | left, left top, left bottom |
start | start, start top, start bottom |
right | right, right top, right bottom |
end | end, end top, end bottom |
Delay
Set delay on TooltipTrigger to control how long to wait before showing the tooltip, in milliseconds. Use delay={0} to show it immediately. Set closeDelay on TooltipTrigger to control the delay before hiding it.
Component API
TooltipTrigger
TooltipTrigger uses the React Aria Components <TooltipTrigger> component to manage the tooltip's trigger, timing, and open state.
See the React Aria TooltipTrigger API for all supported props, including delay, closeDelay, isDisabled, isOpen, defaultOpen, and onOpenChange.
Tooltip
Tooltip extends the React Aria Components <Tooltip> component and renders the tooltip content.
arrowbooleantrueinversebooleanfalseoffsetnumber10classNamestring | ((values: TooltipRenderProps) => string)childrenReact.ReactNodeSee the React Aria Tooltip API for positioning and other supported props.
