Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Tooltip examples · Standard

Tooltip on Icon for React

A round icon button with an info icon that explains itself in a tooltip.

Framework
UI library

Dense interfaces can't afford a text label on every control, so icon-only buttons need a way to explain themselves. This React example puts an info icon in a round ghost Button (pill, size="icon-sm") and shows More information in a Tooltip on hover and focus. Use it for inline help next to form fields, settings and data labels, where always-visible help text would crowd the layout.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

When should I use an icon tooltip?

For a short hint on a control that has no room for a label. This demo is an info icon on a round ghost button, and the tooltip repeats More information.

Why is the trigger a round ghost button?

pill makes the Button round. variant="ghost" draws no border or fill until hover, and size="icon-sm" sets a size-8 square.

How big is the info icon?

InfoIcon has no size class, so the button draws it at size-4. text-muted-foreground is the only color on the glyph.

Does an icon-only trigger need an accessible name?

Yes. The icon is aria-hidden="true", so the Button carries aria-label="More information". The tooltip shows that same sentence.

Where does the tooltip text live?

The paragraph More information is the tooltip body. It sits inside TooltipContent.

Which side does this tooltip open on?

The top, which is the default, and it flips when there is not enough room. Set side on TooltipContent, for example bottom.

All 8 tooltip examples