simple_tooltip_test.html

<!DOCTYPE html>
<html>
<head>
    <title>Simple SVG Tooltip Test</title>
    <style>
        .test-mark {
            cursor: pointer;
        }
        .test-mark:hover {
            stroke: black !important;
            stroke-width: 3px !important;
            filter: brightness(1.2);
        }
    </style>
</head>
<body>
    <h1>Simple SVG Tooltip Test</h1>
    <p>Hover over the circles to see tooltips:</p>
    
    <svg width="400" height="300" style="border: 1px solid #ccc;">
        <circle cx="100" cy="100" r="20" fill="red" class="test-mark">
            <title>Red Circle: Value 10</title>
        </circle>
        <circle cx="200" cy="150" r="20" fill="blue" class="test-mark">
            <title>Blue Circle: Value 25</title>
        </circle>
        <circle cx="300" cy="200" r="20" fill="green" class="test-mark">
            <title>Green Circle: Value 40</title>
        </circle>
        
        <!-- Test with path element like our generated SVG -->
        <path d="M50,250 A20,20,0,1,1,10,250 A20,20,0,1,1,50,250" fill="orange" class="test-mark">
            <title>Orange Path: Value 55</title>
        </path>
    </svg>
    
    <h2>Generated SVG Test</h2>
    <div id="generated-svg-container">
        <!-- Will load the actual generated SVG here -->
    </div>
    
    <script>
        // Load the actual generated SVG file
        fetch('./test_interactive_chart.svg')
            .then(response => response.text())
            .then(svgText => {
                document.getElementById('generated-svg-container').innerHTML = svgText;
                console.log('Generated SVG loaded');
                
                // Debug the generated SVG
                const marks = document.querySelectorAll('.interactive-mark');
                console.log('Interactive marks found:', marks.length);
                marks.forEach((mark, i) => {
                    const title = mark.querySelector('title');
                    console.log(`Mark ${i}:`, {
                        element: mark.tagName,
                        hasTitle: !!title,
                        titleText: title?.textContent,
                        classes: mark.className
                    });
                });
            })
            .catch(err => console.error('Failed to load SVG:', err));
    </script>
</body>
</html>