Base
Components

Tooltip

Names an icon-only button on hover and focus.

shadcn/uiOverlays
shadcn/ui docs (opens in a new tab)Radix API (opens in a new tab)components/ui/tooltip.tsx

Preview

Installation

It's already in this Base. In another project, add it with the shadcn CLI, then switch its cn import to @/lib/utils, its icons to @/components/icons, and its text-sm and text-xs to text-ui-s and text-ui-xs.

npx shadcn@latest add tooltip

Examples

In a toolbar

The tooltip repeats the aria-label, word for word.

Props

The ones that change how it looks or behaves. The rest are the Radix primitive's, in its API.

PropTypeDefault
side"top" | "right" | "bottom" | "left""top"
delayDurationnumber0

Guidelines

Use it

  • On icon-only buttons, with the same words as the aria-label.

Don't

  • Hide information people need in it: touch screens never show it.

Used in

The screens in this Base that show it, found in the code.

  • The app shell, on every screen

Accessibility

  • It opens on focus as well as hover; Escape closes it.