Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Tooltip examples · Standard

Tooltip with Longer Text for React

A tooltip whose two-sentence message wraps onto several lines.

Framework
UI library

A one-word label isn't always enough. This React example shows a two-sentence message in a Tooltip that wraps onto several lines: the tooltip content caps its width at max-w-xs (320px), so long text breaks into short, readable lines instead of stretching across the screen. Use it for a field definition, a warning or a short onboarding hint that needs a sentence or two.

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 longer multi-line tooltips?

When a control needs a sentence or two of explanation that would clutter the page if it were always visible. Past two or three sentences, use a Popover, which opens on click and stays open while people read.

Why use max-w-xs for longer tooltip text?

It is built in: the tooltip content has max-w-xs (320px), about 50 to 60 characters per line, so you don't add anything to make text wrap. Pass another max-w-* class to the content to change it.

How do I ensure longer tooltips remain readable?

Keep sentences short and plain, lead with the point and leave out jargon. If it takes more than a few seconds to read, it is too long for a Tooltip.

Should I use popovers instead of longer tooltips?

Yes, when the content has links, buttons, inputs or formatting, or when people need to keep it open while they work. A Tooltip is read once and disappears; a Popover is opened on purpose and closed when people are done.

How do longer tooltips work on mobile devices?

Poorly: there is no hover on a touch screen, so a long explanation hidden in a Tooltip is easy to miss. Show it inline or in a Popover on small screens.

Do longer tooltips need different timing than short ones?

The Tooltip stays open as long as its trigger is hovered or focused, so people get all the time they need to read. A short close delay helps when the pointer slips off the trigger mid-sentence. Set closeDelay on TooltipTrigger.

All 8 tooltip examples