Shadcn Tooltip Components

Shadcn Tooltip Component

The Shadcn Tooltip is a small popup that shows a short description when the user hovers over or focuses an element. It explains icon buttons, reveals truncated text and shows keyboard shortcuts without taking space in the layout. Good tooltips make a dense interface easier to learn, especially toolbars and dashboards full of icons.

Tooltips with a title, rich content, an image, custom placement, a hidden arrow and a light color scheme go well beyond the default dark label in this shadcn tooltip collection. Each one wraps the Radix UI Tooltip primitive, which takes care of positioning, collision detection, open delays and ARIA wiring, and is styled with shadcn/ui, React and Tailwind CSS.

What is the Shadcn Tooltip Component?

A tooltip connects a trigger, usually a button, to a floating label. It opens on pointer hover and on keyboard focus, closes when the pointer leaves, focus moves away or Escape is pressed, and places itself on the side with enough room, with a small arrow pointing at the trigger. The content is rendered in a portal, so it is never clipped by a parent with overflow: hidden.

Tooltips are for short, supplementary text only. Touch screens have no hover, so never put essential information or interactive elements such as links inside one. For a richer preview, like a user profile when hovering a name, use a Hover Card. For content that opens on click and can hold buttons or form fields, use a Popover.

Anatomy of the Shadcn Tooltip

8 Shadcn Tooltip Variants

Each tooltip variant listed here is previewed live at the top of this page, together with its source code and install command.

• Basic: An outline button that shows a one line label on hover, the standard tooltip for any action.
• Icon trigger: A round info icon button with a More information tooltip, the typical pattern next to form fields and settings.
• With title: A wider tooltip with a bold heading and a muted paragraph for short explanations.
• Rich content: A compact stats list with status, code coverage, last deploy and performance score in one tooltip.
• With image: A product preview image with a title and one line description above the trigger.
• Placement: Four buttons that open the tooltip on the left, top, bottom and right using the side prop.
• No arrow and light: A version with the arrow hidden, and a light tooltip that keeps a pale background in both light and dark mode.

How to Install the Shadcn Tooltip Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a tooltip variant by its name:

npx shadcn@latest add @shadcnuikit/tooltip1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Tooltip Component

Wrap the trigger in TooltipTrigger with asChild and put the text in TooltipContent. Icon only buttons need an aria-label as well.

import { CopyIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"

export function CopyButton() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline" size="icon" aria-label="Copy link">
          <CopyIcon aria-hidden="true" />
        </Button>
      </TooltipTrigger>
      <TooltipContent side="bottom">Copy link</TooltipContent>
    </Tooltip>
  )
}

Why Use the Shadcn Tooltip Component

• Cleaner interfaces: Icon buttons stay compact while their meaning is one hover away.
• Keyboard accessible: Tooltips open on focus as well as hover, so keyboard users get the same hints.
• Smart positioning: The content flips to the opposite side and shifts along the edge when there is not enough space.
• Never clipped: Rendering in a portal keeps tooltips visible inside scroll areas, tables and cards.
• Easy to theme: The default uses foreground and background tokens, so it inverts nicely in light and dark mode.

Common Tooltip Use Cases

• Icon toolbars: Labels for bold, italic, align and other editor buttons.
• Keyboard shortcuts: Show the shortcut for an action next to its name.
• Truncated text: Reveal the full file name or email when a table cell is cut off.
• Form hints: An info icon next to a label that explains an unusual field.
• Charts and dashboards: Explain a metric or badge without cluttering the card.
• Collapsed sidebars: Show page names beside icons when the sidebar is collapsed.

Customizing the Shadcn Tooltip

Pass classes to TooltipContent to change width, padding or colors; the arrow is an SVG inside the content, so target it with [&_svg]: classes to recolor or hide it, as the light and no arrow variants do. Use side and align for placement and sideOffset for distance. To add a hover delay, set delayDuration on the Tooltip root; a delay on an outer TooltipProvider is overridden by the provider each Tooltip renders. The default colors follow your theme, which you can adjust with the free Theme Generator.

A tooltip with a keyboard shortcut and a short delay:

import { Button } from "@/components/ui/button"
import { Kbd } from "@/components/ui/kbd"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"

export function SaveButton() {
  return (
    <Tooltip delayDuration={300}>
      <TooltipTrigger asChild>
        <Button variant="ghost">Save</Button>
      </TooltipTrigger>
      <TooltipContent>
        Save changes <Kbd>⌘S</Kbd>
      </TooltipContent>
    </Tooltip>
  )
}

Tooltip Accessibility and Keyboard Support

The content has role="tooltip" and is linked to the trigger with aria-describedby while it is open, so screen readers read it as a description after the trigger's own name. That is why an icon button still needs an aria-label: the tooltip describes, the label names.

Only use focusable triggers such as buttons and links, otherwise keyboard users can never open the tooltip. A disabled button does not fire pointer or focus events, so wrap it in a span if it needs a tooltip explaining why it is disabled.

Tooltip Best Practices

• Keep tooltip text to a few words; if it needs a paragraph, it belongs on the page.
• Do not repeat the visible label of a button; add information the user cannot already see.
• Never put links, buttons or form fields inside a tooltip, because users cannot reach them.
• Give every icon only trigger an aria-label in addition to the tooltip.
• Do not rely on tooltips for mobile users; important hints should be visible without hover.
• For interactive or larger previews, use a Popover or Hover Card instead.

Components Related to Tooltip

Shadcn Tooltip FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.