Shadcn Tooltip

Browse 16 production-ready shadcn tooltip components for contextual help hints, keyboard shortcuts, and icon labels. Shadcn Tooltip is built on Radix UI primitives and fully compatible with Shadcn Create style options.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Short labels for buttons and icon only toolbar actions, with a keyboard shortcut where one exists
Help text on an info icon, a warning, a verified mark, a locked feature or a disabled button
Compact summaries behind a trigger, such as service status, notifications, file details or a person

When not to use

Content with links or buttons that keyboard users must be able to reach: use the Popover component
A rich profile or page preview with a large photo, bio and dates: use the Hover Card component
A status or count that stays readable without pointing at anything: use the Badge component

Agent notes

Outside a TooltipProvider the base Tooltip opens after 600ms and inside one at once; the radix Tooltip throws without one
TooltipTrigger renders a button of its own, so a Button nested in it without render or radix asChild makes a button in a button
TooltipContent is portaled to the end of the body with no focus guards, so a link or button in it is not next in Tab order after its trigger

Markdownhttps://web.dev.reui.io/components/tooltip.md

MCPget_component("tooltip")

Installnpx shadcn@latest add tooltip

Full index for agents:llms.txtReUI MCP setup

Shadcn Tooltip: Contextual Help and Hints

Shadcn Tooltip is a popover that shows brief contextual information when users hover, focus, or interact with an element. Built on Radix UI, it follows WAI-ARIA tooltip semantics and respects keyboard focus so screen readers and keyboard users can access the content.

Wrap a trigger element (icon, button, link) and define the tooltip content. Control delay (when tooltip appears) and positioning (top, right, bottom, left). Shadcn Create style options apply to tooltip background, text, and sizing so your design tokens flow into exported code.

ReUI lists tooltip components on icon buttons, help text, keyboard shortcuts, and form hints so you evaluate timing, positioning, and content length next to real interfaces. The sections below explain what it is, why teams use it, which features matter, and how it pairs with other components.

What is Shadcn Tooltip?

A tooltip is a non-modal, non-interactive popover that appears on hover or focus to provide brief information. Unlike Shadcn Popover (interactive, can contain buttons), tooltips are read-only hints that disappear when focus leaves the trigger.

Components here show tooltips on icon buttons, help icons, keyboard shortcuts, and disabled controls. They help you decide whether a tooltip, Shadcn Popover, or inline text is clearer for your hint.

Why Use Shadcn Tooltip?

Teams use tooltips to avoid clutter. Rather than label every icon, a tooltip explains on demand. Keyboard shortcuts, button purposes, and disabled reasons are common tooltip uses.

The layouts on this page show how tooltips pair with icons, buttons, and form fields.

Shadcn Tooltip Features

Radix UI Foundation. Built on Radix UI Tooltip primitive. Manages focus, delay, positioning, and ARIA attributes automatically.
Hover and Focus Trigger. Tooltip appears on mouse hover or keyboard focus. Respects user preferences (prefers-reduced-motion) for animations.
Configurable Delay. Control when the tooltip appears after hover or focus. Default delay prevents tooltips from flashing on quick interaction.
Positioning Options. Display tooltip above, below, left, or right of the trigger. Auto-adjust if near viewport edge to prevent cutoff.
Brief, Non-Interactive Content. Tooltips are read-only hints. For interactive content (buttons, links), use Shadcn Popover instead.

Add tooltips to icon-only Shadcn Button components to clarify their purpose: <Button variant="ghost"><HelpIcon /></Button> with a tooltip hint.

Pair tooltips with Shadcn Toggle and Shadcn Toggle Group buttons to explain what each option does.

Use tooltips on disabled form fields to explain why they're unavailable (e.g., 'disabled: complete step 1 first').

Frequently Asked Questions

What's the difference between a tooltip, popover, and hover-card?

Tooltip shows a brief label on hover (e.g., button icon explanation). Popover is interactive and persistent, triggered by click (e.g., a filter panel). Hover-card is richer than a tooltip but simpler than a popover. Choose based on content richness and interaction.

How do I show a tooltip on a disabled button?

Wrap the disabled button in a span with pointer-events: none removed, or use a container with the tooltip trigger. The issue: disabled buttons don't receive mouse events. Solution: wrap with a div and attach the tooltip to the wrapper.

Can I customize tooltip delay and animation?

Yes. Most tooltip libraries expose delayOpen and delayClose props in milliseconds. Adjust the animation duration via Tailwind or CSS transitions. Common component: fast open (100ms), longer close (300ms) to prevent flicker.

Do tooltips work on touch devices?

No. Hovering doesn't exist on touch. Show tooltips on long-press or tap-and-hold, or replace them with visible labels. For mobile-first design, consider always-visible text instead of tooltips for critical information.

How do I create a tooltip for an icon-only button?

Pair the icon button with a tooltip. The button has no visible text, only an icon (e.g., a gear icon). The tooltip reveals the label ('Settings') on hover. Use aria-label on the button for screen readers.

Can I trigger a tooltip programmatically?

Yes. Most tooltip libraries expose open and close functions via a ref or callback. Trigger on focus, after an error, or after a user action. Use sparingly so tooltips feel helpful, not disruptive.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.