Installation
npx logic2b@next add tooltipUsage
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
<Tooltip>
<TooltipTrigger>Hover</TooltipTrigger>
<TooltipContent>Add to library</TooltipContent>
</Tooltip>
Usage notes
Note: Tooltip wraps itself in a TooltipProvider, so it works standalone. Wrap your app in a single TooltipProvider to share delay settings across multiple tooltips.
TooltipContent also accepts Radix positioning props such as side (top \| right \| bottom \| left) and align.
Examples
Sides
On an icon button
Accessibility
- The tooltip opens on hover and on keyboard focus of the trigger, and closes on
Escape. - Use
TooltipTrigger asChildso the tooltip attaches to a real interactive element (e.g. aButton) that can receive focus. - Tooltips supplement, but do not replace, an accessible name — give icon-only triggers their own
aria-label.
Live playground
Edit the component props and inspect the exact JSX before copying it. The preview loads only when this section enters the viewport.
Generated JSX
<Tooltip>
<TooltipTrigger
className="rounded-md border px-4 py-2 text-sm font-medium"
>Registry status</TooltipTrigger>
<TooltipContent>All quality gates pass</TooltipContent>
</Tooltip>API reference
Generated from the public TypeScript exports in src/ui/tooltip.tsx.
Tooltip
ComponentProps: React.ComponentProps<typeof TooltipPrimitive.Root>TooltipTrigger
ComponentProps: React.ComponentProps<typeof TooltipPrimitive.Trigger>TooltipContent
ComponentProps: React.ComponentProps<typeof TooltipPrimitive.Content>| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
sideOffset | number | No | 0 | — |
TooltipProvider
ComponentProps: React.ComponentProps<typeof TooltipPrimitive.Provider>| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
delayDuration | number | No | 0 | The duration from when the pointer enters the trigger until the tooltip gets opened. |
Accessibility contract
Machine-readable behavior and consumer responsibilities for tooltip.
- Support
- Primitive-managed
- Pattern
- tooltip
- Radix Tooltip
| Keys | Behavior |
|---|---|
| Tab | Opening trigger focus reveals the tooltip. |
| Escape | Close the open surface and restore focus. |
Built-in semantics
- Tooltip content is associated with its trigger and opens for keyboard focus as well as hover.
Consumer responsibilities
- Tooltips supplement rather than replace the trigger's accessible name.