Tooltip
A tooltip that appears on hover, providing hints or additional information about UI elements. Supports different placements, delays, and rich content.
Basic Tooltip
Simple tooltip with text content.
Placements
Tooltip can appear on any side of the trigger.
Icon Buttons
Tooltips are essential for icon-only buttons to provide context.
With Keyboard Shortcuts
Show keyboard shortcuts in tooltips.
Custom Delay
Adjust how long before the tooltip appears.
Instant Mode
Show tooltip immediately without delay.
Rich Content
Tooltips can contain formatted text and elements.
On Other Elements
Tooltips work with any hoverable element.
Custom Offset
Adjust the distance between trigger and tooltip.
Disabled
Tooltips can be disabled programmatically.
DAW Transport Example
Typical tooltip usage in a transport bar.
Behaviors
Tooltip interaction options.
Triggers
- Mouse enter - Start show delay
- Mouse leave - Hide (with optional delay)
- Focus - Show tooltip (keyboard accessible)
- Blur - Hide tooltip
Props
- placement - top, bottom, left, right
- delay - Time before showing (default: 300ms)
- hideDelay - Time before hiding (default: 0ms)
- instant - Show immediately (no delay)
- offset - Distance from trigger (default: 8px)
- disabled - Disable tooltip
Auto-positioning
- Flips to opposite side if not enough space
- Constrained to viewport edges
- Updates on scroll/resize