Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Tooltip examples · Content

Tooltip with Title and Description for React

A tooltip with a bold title over a short line of description.

Framework
UI library

Sometimes a label needs a reason after it. This React example opens a Tooltip with a bold Pro Feature title over a one-line description, stacked in a column with gap-1. The title says what it is, the description says why it matters. Use it for premium features, actions that are unavailable and controls that need a word of context.

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 title plus description tooltips?

When the hover text needs a heading and an explanation: what a premium feature is and how to get it, what a control changes, why an action is unavailable. For a plain label, use a single line.

How long should tooltip descriptions be?

A sentence, two at most, like Upgrade to Pro to unlock this feature and many more. Anything longer belongs in a Popover.

Why does the description wrap?

The tooltip content caps its width at max-w-xs (320px), so a longer description wraps into short lines instead of stretching the tooltip. Pass another max-w-* class to change it.

How do I create visual hierarchy in tooltip content?

With weight and size: the title is font-semibold and the description stays at the tooltip's small text size, text-xs, with gap-1 between them. Both use the tooltip's text color, so they keep their contrast in light and dark mode.

Do screen readers announce structured tooltip content correctly?

The title and the description are read in order, top to bottom, when the trigger gets focus. Base UI does not link the tooltip to the trigger, so put anything people must hear in the trigger's own label.

Do structured tooltips work on mobile touch devices?

Not as a hover hint: touch screens have no hover. Make the explanation visible inline on small screens, or open it on tap with a Popover.

All 8 tooltip examples