🎨 Interactive Tooltip Styles Demo

📋 How to Test:

Click on the colored hotspot markers to open tooltips
Compare the two different display styles side by side
The Arrow Style shows a traditional tooltip with an arrow pointer
The Line Style draws an animated connection line to the tooltip
Click anywhere outside to close tooltips

📍 Arrow Style (Default)

Traditional tooltip with arrow pointer

Loading...

✨ Line Connection Style

Animated line connection to tooltip

Loading...

🔧 Implementation Details

Setting Tooltip Style:

You can configure the tooltip style in two ways:

Global Setting: Set tooltip_style in the image configuration (applies to all hotspots)
Per Hotspot: Set display_style on individual hotspot data (overrides global setting)

// Example hotspot data with line style
{
    "title": "Product Feature",
    "description": "Click to learn more",
    "display_style": "line",  // Options: "arrow" or "line"
    "x": 45,
    "y": 60
}