Tooltip
Displays contextual information when hovering or focusing an element. Built on Base UI's tooltip primitive.
Last updated August 8, 2026
CreditsModifiedPublished
Copied from shadcn/ui.
- TooltipTrigger measures the ambient direction where it renders and passes it explicitly to the portaled TooltipContent, so side="inline-start"/"inline-end" resolve correctly instead of always falling back to document direction
Overview
"use client"
import { Button } from "@/components/ui/button"
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip"
export function TooltipDemoExample() {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<Button variant="outline">Hover</Button>} />
<TooltipContent>Add to library</TooltipContent>
</Tooltip>
</TooltipProvider>
)
}Installation
$ npx shadcn@latest add https://ui.persian-labs.ir/r/tooltip.jsonUsage
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip"
export function Example() {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<Button variant="outline">Hover</Button>} />
<TooltipContent>Add to library</TooltipContent>
</Tooltip>
</TooltipProvider>
)
}RTL
The tooltip measures the direction it actually renders in and passes it to the portaled popup, so it opens on the correct side even though the popup itself lives outside the RTL container in the DOM.
"use client"
import { Button } from "@/components/ui/button"
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip"
export function TooltipRtlExample() {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<Button variant="outline">ذخیره</Button>} />
<TooltipContent>افزودن به علاقهمندیها</TooltipContent>
</Tooltip>
</TooltipProvider>
)
}