🎯 Try It Live!
Hover, click, or focus on these elements to see tooltips in action
Smart Positioning
Tooltips automatically adjust position to stay within viewport
Top Start
Top
Top End
Left
Center (Hover Around)
Right
Bottom Start
Bottom
Bottom End
Mobile-Optimized Experience
Touch-friendly tooltips that work perfectly on mobile devices
Premium Headphones
?
$199.99
Tap the help icons for more information
E-commerce Use Cases
Real-world examples for online stores
Shipping Info
Free Shipping
Size Guide
Form Help System
Contextual help for form fields
Tooltip Variants
Different styles for different contexts
Implementation Examples
HTML Data Attributes
<button data-tooltip="Tooltip content">Hover me</button>
<button
data-tooltip="Success message"
data-tooltip-position="top"
data-tooltip-variant="success">
Success Button
</button>
<span
data-tooltip="Click to toggle"
data-tooltip-trigger="click">
Click me
</span>
JavaScript API
const tooltip = amp.createTooltip(element, {
content: 'Tooltip content',
position: 'top',
variant: 'success',
trigger: 'hover'
});
amp.createProductTooltip(element, {
name: 'Premium Headphones',
price: '$199.99',
description: 'Wireless with noise cancellation'
});
tooltip.updateContent('New content');
Key Features
-
Smart Positioning: Automatically adjusts to stay within viewport
-
Mobile Optimized: Touch-friendly with proper sizing for mobile
-
Accessibility: Full ARIA support and keyboard navigation
-
Multiple Triggers: Hover, click, focus, or manual control
-
Rich Content: Support for HTML content and interactive elements
-
E-commerce Ready: Built-in utilities for product and shipping info
-
Performance: Lazy creation and efficient DOM management
-
Customizable: Delay, animations, and styling options