💬 Tooltips & Popovers
Contextual help tooltips, interactive popovers, and overlay information components
🎭 Component Demonstrations
Explore all tooltip and popover features with interactive demos
🎯 Basic Tooltips
Hover over buttons to see tooltips in different positions
🎨 Tooltip Themes
Different theme variations available in sparkles-tooltip.js
📋 Rich Content Popovers
Click-triggered popovers with HTML content
Wireless Headphones
Click for details
Rhinestone Sizes
Click for size guide
⚡ Interactive Elements
Tooltips integrated with form elements and action buttons
Contact Form
Action Buttons
🔥 Advanced Features
Demonstrating advanced tooltip configurations
📱 Mobile Touch Tooltips
These tooltips are optimized for mobile devices with touch interactions
⚙️ Configuration Options
Core Options
- • placement: 'auto', 'top', 'bottom', 'left', 'right'
- • trigger: 'hover', 'click', 'focus', 'manual'
- • theme: 'dark', 'light', 'primary', 'success', 'error'
- • delay: { show: ms, hide: ms }
- • offset: distance in pixels
- • arrow: true/false
- • animation: 'fade', 'slide', 'none'
Advanced Options
- • interactive: allow hover over tooltip
- • maxWidth: maximum width in pixels
- • followCursor: follow mouse movement
- • hideOnClick: hide when clicking outside
- • boundary: 'viewport', 'scrollParent'
- • zIndex: custom z-index value
- • trackAnalytics: track tooltip events
📝 Usage Examples
Real-world implementation examples for tooltips and popovers
1. Basic Tooltip Implementation
<div x-data="sparklesTooltip()" x-init="
content = 'Helpful information about this feature';
config = { placement: 'top', theme: 'dark' };
init();
">
<button @mouseenter="show($el)"
@mouseleave="hide()"
class="px-4 py-2 bg-blue-600 text-white rounded">
Hover for Help
</button>
</div>2. Popover with Rich Content
<div x-data="sparklesTooltip()" x-init="
content = \`
<div class='p-3'>
<h4 class='font-bold mb-2'>Product Details</h4>
<p class='text-sm mb-3'>Premium quality rhinestones</p>
<button class='px-3 py-1 bg-blue-600 text-white rounded'>
View More
</button>
</div>
\`;
config = {
placement: 'bottom',
trigger: 'click',
theme: 'light',
interactive: true,
maxWidth: 300
};
init();
">
<div @click="toggle($el)" class="cursor-pointer">
Click for Details
</div>
</div>3. Hover and Click Trigger Patterns
// Hover trigger (default)
config = { trigger: 'hover' };
<button @mouseenter="show($el)" @mouseleave="hide()">Hover Me</button>
// Click trigger for mobile-friendly interaction
config = { trigger: 'click' };
<button @click="toggle($el)">Click Me</button>
// Focus trigger for form elements
config = { trigger: 'focus' };
<input @focus="show($el)" @blur="hide()" />
// Manual trigger for custom logic
config = { trigger: 'manual' };
<button @click="isOpen ? hide() : show($el)">Manual Control</button>⚡ Performance & Accessibility
Best practices for inclusive and efficient tooltip implementation
Tooltip Accessibility
Automatic ARIA describedby attributes and keyboard navigation support. Screen readers announce tooltip content when the trigger element receives focus.
Popover Accessibility
Focus management for interactive popovers, Escape key handling for dismissal, and proper ARIA roles for rich content overlays.
Performance Optimization
Lazy initialization prevents unnecessary DOM manipulation, efficient positioning calculations, and automatic cleanup when components unmount.
Mobile-Friendly Alternatives
Click triggers replace hover interactions on touch devices, larger touch targets for better usability, and automatic positioning adjustments for small screens.