ShadcnStore

Appearance

Shadcn Tooltip ​

The shadcn/ui Tooltip shows a short label when the user hovers or focuses an element, styled with Tailwind CSS v4. Built on Base UI, it opens on keyboard focus as well as hover. Tooltips clarify icon buttons and controls across ShadcnStore blocks.

Key features ​

  • Opens on hover and keyboard focus.
  • Configurable open and close delay.
  • Renders in a portal so it is never clipped.
  • Trigger composes with any element via the render prop.

Installation ​

bash
npx shadcn@latest add tooltip

Usage ​

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

export function Example() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger render={<Button variant="outline" size="icon" aria-label="Add" />}>
          +
        </TooltipTrigger>
        <TooltipContent>Add to library</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Wrap your app (or a section) in a single TooltipProvider so hovering between triggers feels responsive.

Placement ​

Set which edge the tooltip opens from with the side prop on TooltipContent: top (default), right, bottom, or left. Hover each trigger to see it.

tsx
<Tooltip>
  <TooltipTrigger render={<Button variant="outline" />}>Right</TooltipTrigger>
  <TooltipContent side="right">Tooltip on right</TooltipContent>
</Tooltip>

Delay ​

tsx
<TooltipProvider delayDuration={200}>…</TooltipProvider>

Composition ​

Use the render prop on TooltipTrigger to compose with a Button or other element. Put label text as children on the outer component:

tsx
<TooltipTrigger render={<Button size="icon" aria-label="Add" />}>+</TooltipTrigger>

Accessibility ​

  • A tooltip supplements a control; it is not a replacement for an accessible name. Give icon-only Buttons an aria-label even with a tooltip.
  • Tooltips open on focus, so keyboard users see them too. Keep the text short.
  • Never put essential or interactive content in a tooltip; it is hover-based and unreliable on touch.

When to use the Tooltip ​

Use a Tooltip for a brief, non-essential hint: naming an icon button, explaining a disabled state, or expanding a truncated label. For richer or interactive content, use a Popover. For persistent inline messages, use an Alert.

Used in these blocks ​

A Tooltip most often labels an icon Button. For interactive floating content use a Popover; for menus use a Dropdown Menu.

FAQ ​

What is the shadcn tooltip used for? ​

The Tooltip shows a short label on hover or focus, useful for explaining icon-only buttons and truncated text.

Do tooltips work on touch devices? ​

Tooltips are hover and focus based, so they are unreliable on touch. Do not hide essential information in a tooltip; use a Popover or visible text instead.

How do I set the tooltip delay? ​

Set delayDuration on the TooltipProvider or a single Tooltip to control how long before it opens on hover.

Why does my tooltip not show on click? ​

Tooltips open on hover and focus by design. For click-triggered floating content, use a Popover instead.

Copyright © 2025-2026 ShadcnStore