Tooltip
A popup that appears when an element is hovered or focused, showing a hint for sighted users.
Loading...
Loading code...
Installation
Usage
import {
Tooltip,
TooltipPopup,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip"<Tooltip>
<TooltipTrigger render={<Button variant="outline" />}>
Hover me
</TooltipTrigger>
<TooltipPopup>Helpful hint</TooltipPopup>
</Tooltip>Grouping Tooltips
To group multiple tooltips so they appear instantly after the first one is opened, wrap them in TooltipProvider. The grouping logic ensures that once a tooltip becomes visible, the adjacent tooltips will be shown instantly.
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<Button variant="outline" />}>
Tooltip 1
</TooltipTrigger>
<TooltipPopup>Content 1</TooltipPopup>
</Tooltip>
<Tooltip>
<TooltipTrigger render={<Button variant="outline" />}>
Tooltip 2
</TooltipTrigger>
<TooltipPopup>Content 2</TooltipPopup>
</Tooltip>
</TooltipProvider>Examples
Grouped Tooltips
Loading...
Loading code...
Comparing with Radix / shadcn
If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with ui/topia quickly.
Quick Checklist
- Replace
asChild→renderonTooltipTrigger - Prefer
TooltipPopup;TooltipContentremains for legacy - If you used
asChildon parts, switch to therenderprop
Comparison Example
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Hover me</Button>
</TooltipTrigger>
<TooltipContent>Helpful hint</TooltipContent>
</Tooltip><Tooltip>
<TooltipTrigger render={<Button variant="outline" />}>
Hover me
</TooltipTrigger>
<TooltipPopup>Helpful hint</TooltipPopup>
</Tooltip>