Tooltip
A brief text label that appears on hover to provide additional context
A lightweight text popup that appears when hovering over an element. Built on Radix UI Tooltip for accessible, keyboard-friendly interactions.
Installation
npx shadcn@latest add https://nteract-elements.vercel.app/r/tooltip.jsonCopy from the nteract/elements registry.
Usage
import {
Tooltip,
TooltipTrigger,
TooltipContent,
} from "@/registry/primitives/tooltip"
export function Example() {
return (
<Tooltip>
<TooltipTrigger>Hover</TooltipTrigger>
<TooltipContent>
<p>Tooltip text</p>
</TooltipContent>
</Tooltip>
)
}Examples
Basic Tooltip
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Hover</Button>
</TooltipTrigger>
<TooltipContent>
<p>Add to library</p>
</TooltipContent>
</Tooltip>On Icon Button
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="sm">?</Button>
</TooltipTrigger>
<TooltipContent>
<p>Click for help</p>
</TooltipContent>
</Tooltip>Multiple Tooltips with Provider
When using multiple tooltips, wrap them in a single TooltipProvider to share delay settings:
import { TooltipProvider } from "@/registry/primitives/tooltip"
export function Example() {
return (
<TooltipProvider delayDuration={300}>
<Tooltip>
<TooltipTrigger>First</TooltipTrigger>
<TooltipContent>First tooltip</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger>Second</TooltipTrigger>
<TooltipContent>Second tooltip</TooltipContent>
</Tooltip>
</TooltipProvider>
)
}Notebook Examples
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline" size="sm">Run</Button>
</TooltipTrigger>
<TooltipContent>
<p>Execute cell (Shift+Enter)</p>
</TooltipContent>
</Tooltip>Props
Tooltip
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state |
defaultOpen | boolean | false | Default open state |
onOpenChange | (open: boolean) => void | — | Callback when open state changes |
delayDuration | number | 0 | Delay before showing (ms) |
TooltipTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Render as child element using Radix Slot |
...props | ButtonHTMLAttributes | — | All standard button attributes |
TooltipContent
| Prop | Type | Default | Description |
|---|---|---|---|
sideOffset | number | 0 | Distance from trigger in pixels |
className | string | — | Additional CSS classes |
...props | TooltipPrimitive.ContentProps | — | All Radix Tooltip Content props |
TooltipProvider
| Prop | Type | Default | Description |
|---|---|---|---|
delayDuration | number | 0 | Default delay for all tooltips (ms) |
skipDelayDuration | number | 300 | Skip delay when moving between tooltips (ms) |
disableHoverableContent | boolean | false | Prevent tooltip from staying open when hovering content |