<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Map</title>
<style>
.country {
fill: lightblue;
stroke: black;
stroke-width: 1;
cursor: pointer;
}
.country:hover {
fill: deepskyblue;
}
#tooltip {
position: absolute;
background: rgba(255, 255, 255, 0.8);
border: 1px solid #ccc;
padding: 5px;
display: none;
pointer-events: none;
}
</style>
</head>
<body>
<div id="tooltip"></div>
<svg width="800" height="500" viewBox="0 0 800 500">
<path class="country" id="country1" d="M100,100 L150,100 L150,150 L100,150 Z" data-name="Country A"></path>
<path class="country" id="country2" d="M200,100 L250,100 L250,150 L200,150 Z" data-name="Country B"></path>
<path class="country" id="country3" d="M300,100 L350,100 L350,150 L300,150 Z" data-name="Country C"></path>
</svg>
<script>
const tooltip = document.getElementById('tooltip');
const countries = document.querySelectorAll('.country');
countries.forEach(country => {
country.addEventListener('mouseover', (event) => {
tooltip.innerHTML = country.getAttribute('data-name');
tooltip.style.display = 'block';
tooltip.style.left = event.pageX + 'px';
tooltip.style.top = event.pageY + 'px';
});
country.addEventListener('mousemove', (event) => {
tooltip.style.left = event.pageX + 'px';
tooltip.style.top = event.pageY + 'px';
});
country.addEventListener('mouseout', () => {
tooltip.style.display = 'none';
});
});
</script>
</body>
</html>]]>
