Appearance
Tooltip Component
A versatile tooltip component with intelligent positioning, multiple trigger modes, and collision detection.
Overview
The Tooltip component provides:
- Multiple positioning options with automatic collision detection
- Three trigger modes: hover, click, and focus
- Intelligent positioning that flips when near viewport edges
- Teleport functionality for better positioning
- Customizable delays and animations
- Arrow indicators with dynamic positioning
- Theme variants and custom styling
When to Use
Use the Tooltip component when you need to:
- Provide additional context or help text for UI elements
- Show detailed information on hover or focus
- Create interactive tooltips with click triggers
- Display contextual help or explanations
- Add accessibility information for screen readers
- Show validation messages or status information
Key Features
- Smart Positioning: 8 position options with automatic collision detection and flipping
- Multiple Triggers: Hover, click, and focus trigger modes
- Collision Detection: Automatically flips position when near viewport edges
- Teleport: Renders tooltip in body for better positioning
- Dynamic Arrows: Arrow indicators that point correctly to trigger elements
- Customizable Delays: Configurable show/hide delays
- Theme Variants: Built-in light, success, error, and warning themes
- Accessibility: Proper focus management and keyboard support
- Responsive: Adapts to viewport changes and scrolling