Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Tooltip with Title and Description
A tooltip with structured content showing title in font-semibold and description in text-xs using flex-col gap-1 layout
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes a single line of help text is not enough—users need context and explanation. This React tooltip pattern shows structured content with a semibold title and smaller description text using flex-col layout. Built with shadcn/ui Tooltip and Radix UI primitives with max-w-xs width constraint, the hierarchical content provides detailed guidance—perfect for premium features, complex actions, disabled states, informational icons, upgrade prompts, or any interface element where multi-line contextual help explains what something is and why users might care about it.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Basic Tooltip
Simple single-line tooltip text
Tooltip with Icon
Tooltip containing icon and text
Tooltip with Keyboard Shortcut
Tooltip showing keyboard command
Popover with Content
Clickable popover with rich content
Tooltip with Image
Tooltip containing preview image
Info Card
Card with title and description
Questions you might have
React Toggle with Text
Toggle button with icon and text label combining Lucide React icon with visible text for improved clarity and accessibility without aria-label
React Tooltip with Icon
A tooltip with icon and text content using flex items-center gap-2 layout with CheckCircleIcon from Lucide React for status indicators