点击事件触发后content-hover无法清除定时器的问题解决

问题核心是鼠标移到tooltip内容上时，之前pin元素触发的定时器没被终止，导致tooltip还是会在1250ms后消失。解决思路就是给tooltip内容添加鼠标进入/离开事件，控制定时器的启停：

1. 给tooltip-content元素加mouseenter事件，触发时立即清除定时器，阻止tooltip被隐藏；同时主动加上content-hover类确保状态正确。
2. 给tooltip-content元素加mouseleave事件，触发时重新设置定时器，超时后移除active和content-hover类完成隐藏。
3. 注意timeoutId要在外部作用域声明，保证所有事件处理函数都能操作同一个定时器实例。

完整修复后的代码：

// 确保timeoutId在外部作用域，所有事件都能访问
let timeoutId;
const pin = tooltip.querySelector('.pin');
const content = tooltip.querySelector('.tooltip-content');

pin.addEventListener("click", () => {
    tooltip.classList.add("active");
});

pin.addEventListener("mouseleave", () => {
    timeoutId = setTimeout(() => {
        if (!tooltip.classList.contains("content-hover")) {
            tooltip.classList.remove("active");
        }
    }, 1250);
});

// 鼠标进入tooltip内容时，清除定时器并标记hover状态
content.addEventListener("mouseenter", () => {
    clearTimeout(timeoutId);
    tooltip.classList.add("content-hover");
});

// 鼠标离开tooltip内容时，重新启动隐藏定时器
content.addEventListener("mouseleave", () => {
    timeoutId = setTimeout(() => {
        tooltip.classList.remove("active");
        tooltip.classList.remove("content-hover");
    }, 1250);
});

修改后，点击pin弹出tooltip后，鼠标移到内容上时，之前的定时器会被清除，tooltip不会消失；只有当鼠标离开内容后，才会重新启动定时器，超时后隐藏tooltip。

内容的提问来源于stack exchange，提问作者kelperg1