// 获取所有悬停区域和提示框
const hoverAreas = document.querySelectorAll('.hover-area');
const tooltip = document.querySelector('.tooltip');

// 遍历每个悬停区域
hoverAreas.forEach((area) => {
    // 监听鼠标悬停事件
    area.addEventListener('mouseover', (e) => {
        // 设置提示内容
        tooltip.textContent = area.dataset.tooltip;
        tooltip.style.display = 'block';

    // 直接使用 clientX 和 clientY
    tooltip.style.top = `${e.clientY + 10}px`;
    tooltip.style.left = `${e.clientX + 10}px`;
     });

    // 监听鼠标离开事件
    area.addEventListener('mouseout', () => {
        tooltip.style.display = 'none';
    });
});