Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Tooltip with Longer Text
A tooltip with multi-line longer text content using max-w-xs width constraint for proper text wrapping and readability
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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