Shadcn Tooltip

The shadcn tooltip is a short label on hover and keyboard focus. Use it for icon-only buttons, truncated cells, and why a control is disabled. It leaves on pointer-out, blur, or Escape.

Usage

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

<Tooltip>
  <TooltipTrigger render={<Button variant="outline" />}>
    Hover
  </TooltipTrigger>
  <TooltipContent>
    <p>Add to library</p>
  </TooltipContent>
</Tooltip>

render={<Button />} keeps the Button as the trigger. This wrapper sets delayDuration to 0 — it opens immediately.

Composition

TooltipProvider is optional. Each Tooltip already wraps one.

Side

side is top, right, bottom, or left. Collision still flips it if the viewport is tight.

With Keyboard Shortcut

Drop a Kbd in the content. It restyles itself on the inverted tooltip background.

Disabled Button

Disabled elements do not fire pointer events. Wrap the button in a span and put the trigger on the span.

RTL

Wrap with DirectionProvider and dir="rtl". side values stay physical — left is still left.

API

TooltipContent

TooltipTrigger takes render. TooltipProvider takes delayDuration and skipDelayDuration.

Keyboard

Notes

Keep the copy to a phrase. A paragraph belongs in a Popover or Hover Card.

With other components

Questions

Related