Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Tooltip examples · Content

Tooltip with Icon for React

A Status button whose tooltip pairs a check icon with an all-clear message.

Framework
UI library

An icon next to the text tells people the kind of message before they read it. This React example opens a Tooltip on a Status button with a check icon beside All systems operational. The tooltip content already lays its children out in a row, so the icon and the text sit side by side with gap-2 between them, and the icon takes the tooltip's text color. Use it for system status, sync state, validation or connection indicators.

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 put an icon in the tooltip?

When the mark tells the kind of message before the sentence. This demo puts a CircleCheckIcon beside All systems operational.

What size is the icon in the tooltip?

size-4 on CircleCheckIcon, which lines up with the tooltip's text-xs.

Does the check icon set its own color?

No. It has no color class, so it inherits the tooltip's text color and stays readable on the inverted background.

Why is gap-2 on the tooltip?

The content is a flex row. gap-2 opens a little more space between the check and the sentence, and the row centers them. gap-2 goes on TooltipContent.

Can I add another icon in that row?

This file has one icon and one sentence. Another decorative icon can sit in the same row with aria-hidden="true" and size-4, as long as the text still states the message.

Is the check icon announced?

The sentence carries the message. CircleCheckIcon sets aria-hidden="true", so the check is not read on its own.

All 8 tooltip examples