A popup that displays informational text when hovering over or focusing an element.
A composable tooltip built on Base UI's Tooltip primitive. It renders in a portal with configurable placement, includes an arrow indicator, and supports a provider for controlling the shared delay across multiple tooltips.
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip"
import { Button } from "@/components/ui/button"
export default function TooltipDemo() {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<Button variant="outline" />}>
Hover me
</TooltipTrigger>
<TooltipContent>
<p>This is a tooltip</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)
}
import {
Tooltip,
TooltipTrigger,
TooltipContent,
TooltipProvider,
} from "@/components/ui/tooltip"<TooltipProvider>
<Tooltip>
<TooltipTrigger>Hover me</TooltipTrigger>
<TooltipContent>Tooltip text</TooltipContent>
</Tooltip>
</TooltipProvider><TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Hover</Button>
</TooltipTrigger>
<TooltipContent>This is a tooltip</TooltipContent>
</Tooltip>
</TooltipProvider>Use the side prop on TooltipContent to control where the tooltip appears.
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Top</Button>
</TooltipTrigger>
<TooltipContent side="top">Top tooltip</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Right</Button>
</TooltipTrigger>
<TooltipContent side="right">Right tooltip</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Bottom</Button>
</TooltipTrigger>
<TooltipContent side="bottom">Bottom tooltip</TooltipContent>
</Tooltip>
</TooltipProvider>Set delay on TooltipProvider to control the hover delay for all tooltips in a group.
<TooltipProvider delay={500}>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Delayed</Button>
</TooltipTrigger>
<TooltipContent>Appears after 500ms</TooltipContent>
</Tooltip>
</TooltipProvider>Wraps a group of tooltips to share configuration such as delay timing.
| Prop | Type | Default | Description |
|---|---|---|---|
delay | number | 0 | The delay in milliseconds before a tooltip opens on hover. |
Accepts all props from Base UI's Tooltip.Provider.
The root component for a single tooltip instance. Manages open state.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state. |
onOpenChange | (open: boolean) => void | — | Callback when the open state changes. |
Accepts all props from Base UI's Tooltip.Root.
The element that activates the tooltip on hover or focus.
| Prop | Type | Default |
|---|---|---|
className | string | — |
children | ReactNode | — |
The popup content with an arrow. Renders inside a portal with a positioner.
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" | "bottom" | "left" | "right" | "top" | The preferred side of the trigger. |
sideOffset | number | 4 | Distance in pixels from the trigger. |
align | "start" | "center" | "end" | "center" | Alignment along the trigger edge. |
alignOffset | number | 0 | Offset from the alignment edge in pixels. |
className | string | — | |
children | ReactNode | — |