Tooltip Component Demo

Hover over any element to see the glassmorphism tooltips in action

Positioning Options

This tooltip appears on top
This tooltip appears on the right
This tooltip appears on the bottom
This tooltip appears on the left

Icon Tooltips

Information about this feature
Help is available for this item
Click to view settings
Warning: This action cannot be undone
Success! Your changes have been saved

Pricing Feature Example

Includes full scuba gear, wetsuit, fins, mask, and two tanks for your dives
Gears
Full two-tank dive
Fresh tropical fruits, bottled water, and light snacks served between dives
Snacks
Water & light snacks
1-hour pool session covering theory and practical skills for beginners
Training
Pool theory & practical
Experienced bilingual PADI-certified dive master will guide your underwater adventure
Guide
PADI-certified

Inline Text Tooltips

Our tours include transportation

Round-trip transportation from your hotel in Tamarindo
and professional guides
All guides are certified and speak English and Spanish
to make your experience unforgettable.

Long Content Tooltip

This is a longer tooltip that demonstrates how the component handles multi-line text. The content will wrap automatically when it exceeds the maximum width.

Mobile Behavior

📱 On Touch Devices:

  • Tap any element with a tooltip to show it
  • Look for the pulse dot indicator (top-right corner)
  • Tooltip stays visible until you tap again, tap elsewhere, or after 5 seconds
  • Only one tooltip shows at a time for a cleaner experience
  • Larger font size and touch targets for better mobile UX

🖱️ On Desktop:

  • Hover over any element to see the tooltip
  • Tooltip appears instantly and disappears when you move away
  • No pulse indicators needed

Try it on mobile or desktop:

Tap me on mobile, hover on desktop!

How to Use

<Tooltip text="Your tooltip text" position="top">
    <button>Hover me</button>
</Tooltip>

See TOOLTIP_USAGE.md for complete documentation and examples.