Tooltip

Setup

Wrap your app in a single TooltipProvider once at the root (configurable delay/skip). Individual tooltips are composed from Tooltip, TooltipTrigger, and TooltipContent.

Default

Sides

Server Component note

Same caveat as <Dialog>: multiple inline <Tooltip> instances in a Next.js Server Component can race during hydration. Use a sibling 'use client' file (_demos.tsx) to host the live JSX and import the demo functions into the page. Inside a Client Component this works without any wrapper.

Accessibility notes

• Triggers on both hover and focus, so keyboard users see the same context.
• Escape dismisses an open tooltip. Long-press on touch devices.
• Don't put essential information in a tooltip — it's a hint, not a label. Tooltips shouldn't contain interactive content (use Popover instead).
• The fade/zoom-in animation uses CSS, so it's automatically nullified by the library's global reduced-motion rule.