Shadcn.io is not affiliated with official shadcn/ui
Tooltip with Longer Text
A tooltip with multi-line longer text content using max-w-xs width constraint for proper text wrapping and readability
Brief labels are not always enough—sometimes users need a full explanation. This React tooltip pattern shows multi-line text with max-w-xs width constraint for natural text wrapping. Built with shadcn/ui Tooltip and Radix UI primitives with 320px maximum width, the longer tooltip provides detailed guidance—perfect for complex features, data field explanations, warning messages, onboarding hints, feature descriptions, or any interface element where comprehensive hover help requires multiple sentences but full documentation would be excessive and multi-line tooltips balance detail with brevity.
Tooltip with Longer Text preview
Installation
Related Components
Simple Tooltip
Basic single-line tooltip text
Tooltip Positions
Tooltips with different side placements
Tooltip with Title
Structured tooltip with title and description
Popover with Content
Click-triggered rich content popover
Tooltip on Icon
Tooltip triggered by icon button
Inline Help Text
Always-visible help text
FAQ
Was this page helpful?
Sign in to leave feedback.