Question 1

What is a shadcn tooltip?

Accepted Answer

A shadcn Tooltip is the small text label that appears on hover over an element — typically icon buttons ("Save", "Settings"), truncated text (the full string), keyboard shortcuts ("⌘K"). It's built on Radix UI's Tooltip primitive (open-on-hover with configurable delay, ARIA-tooltip role, dismissed on mouse leave or Esc) styled with shadcn/ui as a small dark pill with a tail arrow.

Question 2

Are these tooltip examples free?

Accepted Answer

Yes, every tooltip example on shadcn.io is free for personal and commercial use — no attribution requirement, no runtime dependency, no gating.

Question 3

Tooltip vs Hover Card vs Popover — which one?

Accepted Answer

Tooltip for SHORT text labels on hover ("Save", "Cmd+K", "Mute mic"). HoverCard for RICH preview content on hover (user mention previews, link previews). Popover for content revealed on CLICK (forms, settings panels, color pickers). Pick by content size and trigger gesture: short text → tooltip, rich content + hover → hover card, anything + click → popover.

Question 4

When should I use a tooltip versus a label or a description?

Accepted Answer

Tooltip for SUPPLEMENTARY information that's nice-to-have but not required to use the element — keyboard shortcuts, expanded labels for icon-only buttons, format hints. Label for REQUIRED context next to form fields. Description for LONGER help text below a control. Tooltips are easy to miss (no visual hint they exist until hover) so don't put critical info there. Touch users can't hover at all.

Question 5

How do I add a tooltip to an icon-only button?

Accepted Answer

Use the standard variant. Wrap the IconButton in `<Tooltip>`. The TooltipContent is the action label ("Settings", "Search", "Profile"). Set `aria-label` on the button too — the tooltip helps mouse users; aria-label helps keyboard / screen reader users (who don't trigger hover). Both are needed for full accessibility.

Question 6

How do I show a keyboard shortcut inside the tooltip?

Accepted Answer

Use the content variant. Render the action label and a Kbd-styled chip side-by-side inside TooltipContent: `Save⌘S`. Standard pattern in app shells where users learn shortcuts by hovering over icon buttons. Keep tooltip text under 1 line — tooltips with multi-line content read awkwardly and stay open longer than users expect.

Question 7

How do I tune the open delay (don't show on accidental hover)?

Accepted Answer

Pass `delayDuration={500}` to the Tooltip root (default is 700ms). Lower (200ms) for tooltips users want to discover quickly (icon button labels). Higher (1000ms) for tooltips that should only appear on deliberate hover (info icons in dense forms). For a TooltipProvider that wraps multiple tooltips, set the delay there once instead of per-tooltip.

Question 8

How do I install a tooltip example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading. The CLI copies the example's TSX source into `components/examples/tooltip/…`, plus the shadcn/ui Tooltip primitive (and its Radix dependency) if you don't already have it. Wrap your app in `<TooltipProvider>` once at the root for shared delay configuration.

Question 9

How do I make tooltips work on touch devices?

Accepted Answer

They don't — there's no hover gesture on touch. Two patterns: (1) Hide tooltips on touch via `pointer-events-none` + a `useMediaQuery('(hover: hover)')` check — tooltip content stays available to mouse / keyboard users. (2) For critical info, render the same content as a Popover with click-to-open on touch. Don't pretend hover works on touch — tap-to-toggle on tooltip primitive is an accessibility footgun.

Question 10

How do I position the tooltip (top / bottom / left / right)?

Accepted Answer

Pass `side="top" | "right" | "bottom" | "left"` to TooltipContent (default `"top"`). For navbar buttons, `"bottom"` (tooltip below). For sidebar items, `"right"` (tooltip to the right). Add `sideOffset={4}` for breathing room. Radix's collision detection auto-flips the tooltip if it would clip at the viewport edge.

Question 11

Which libraries do tooltip examples depend on?

Accepted Answer

Radix UI Tooltip (the primitive — hover detection, delay, ARIA-tooltip, collision-aware positioning), shadcn/ui Tooltip (the styled wrapper generated into your project), Tailwind CSS, and Lucide React (icons inside trigger buttons). React 19 baseline.

Question 12

Are tooltip examples accessible for keyboard and screen reader users?

Accepted Answer

Partially. Radix Tooltip opens on focus too (Tab to the trigger → tooltip opens), so keyboard users get the same supplementary info as mouse hovers. Screen readers announce the tooltip content via `aria-describedby` linkage. The catch: tooltips are SUPPLEMENTARY — their content shouldn't be the only path to information. Always pair icon-only buttons with `aria-label` (the tooltip is the visual; aria-label is the semantic).

Question 13

Can I use these tooltip examples with React Server Components?

Accepted Answer

The Tooltip is a client component (it manages open state and hover events). Wrap it inside a Server Component parent. The TooltipProvider also lives in the client — typically mounted once in your root layout. Static tooltip content (no state, just labels) renders trivially; dynamic content (server-fetched info) needs a small client wrapper.

React Tooltip Examples for shadcn/ui

Browse every tooltip example

Frequently Asked Questions