Tooltip

View in Storybook

Explore interactive examples and all component variations in our Storybook.

The Tooltip component provides contextual information when users hover or focus on an element. Built on Radix UI, it offers flexible positioning, customizable delays, and accessibility features. Perfect for providing additional context, help text, or explanations without cluttering the interface.

Basic Usage

View in Storybook

Different Positions

Rich Content Tooltips

Custom Delays

No Delay

Long Delay

Toolbar with Tooltips

Document Editor

Hover over the toolbar buttons above to see their tooltips with keyboard shortcuts.

Form Field Help

User Registration

Username

Password

Email

Properties

TooltipProvider

Property	Type	Description
delayDuration	number	Delay in milliseconds before tooltip appears. Default is 0.
skipDelayDuration	number	Duration to skip delay when moving between tooltips.
disableHoverableContent	boolean	Disable hoverable content to prevent tooltip from staying open.
children	ReactNode	Tooltip components that will use this provider.

Tooltip

Property	Type	Description
open	boolean	Controlled open state of the tooltip.
defaultOpen	boolean	Default open state when uncontrolled.
onOpenChange	(open: boolean) => void	Callback fired when open state changes.
delayDuration	number	Override provider delay duration for this tooltip.
disableHoverableContent	boolean	Override provider hoverable content setting.

TooltipTrigger

Property	Type	Description
asChild	boolean	Render as child element instead of button. Default is false.
children	ReactNode	Element that triggers the tooltip.

TooltipContent

Property	Type	Description
side	"top" | "right" | "bottom" | "left"	Preferred side to display the tooltip.
sideOffset	number	Distance in pixels from the trigger.
align	"start" | "center" | "end"	Alignment relative to the trigger.
alignOffset	number	Offset in pixels from the aligned position.
avoidCollisions	boolean	Whether to avoid collisions with viewport edges.
collisionBoundary	Element | Element[]	Boundary elements for collision detection.
collisionPadding	number | Partial<Record<Side, number>>	Padding for collision detection.
arrowPadding	number	Padding between arrow and content edges.
sticky	"partial" | "always"	Sticky behavior when trigger moves.
hideWhenDetached	boolean	Hide when trigger becomes detached.
className	string	Additional CSS classes for the content.
children	ReactNode	Content of the tooltip.

Accessibility

The Tooltip component includes comprehensive accessibility features:

• Keyboard Navigation - Tooltips appear on focus and disappear on blur
• Screen Reader Support - Proper ARIA attributes and announcements
• Focus Management - Maintains focus on trigger element
• ESC Key Support - Press Escape to close tooltip
• Portal Rendering - Renders in portal to avoid z-index issues
• Auto-positioning - Automatically adjusts position to stay in viewport

Common Use Cases

The Tooltip component is perfect for:

• Help Text - Provide additional context for form fields and controls
• Keyboard Shortcuts - Display keyboard shortcuts for toolbar actions
• Icon Explanations - Explain the purpose of icon-only buttons
• Feature Descriptions - Describe features without cluttering the UI
• Status Information - Show detailed status or error information
• Truncated Content - Show full text for truncated content
• Interactive Hints - Guide users through complex interfaces

Best Practices

1. Concise Content - Keep tooltip content brief and focused
2. Appropriate Timing - Use reasonable delay durations (0-700ms)
3. Clear Triggers - Make it obvious which elements have tooltips
4. Avoid Essential Info - Don't put critical information only in tooltips
5. Mobile Considerations - Consider touch interactions and alternative patterns
6. Positioning - Choose appropriate positioning to avoid covering important content
7. Consistent Styling - Maintain consistent tooltip appearance throughout your app
8. Performance - Use TooltipProvider to share configuration across multiple tooltips