鼠标悬停提示需防抖延迟显示以避免闪烁，常用settimeout+cleartimeout实现：hover时设400ms定时器，期间mouseout或重hover则清除重置；动态tooltip应统一管理、检查dom存在性，移动端宜改用click/longpress，复杂场景可用requestidlecallback优化。
鼠标悬停提示（tooltip）配合防抖延迟显示，核心是避免频繁触发导致的闪烁或误显——不是一 hover 就立刻显示，而是等用户“真想看”时再出现，通常需等待 300~500ms 且期间鼠标没移走。
用 setTimeout + clearTimeout 实现简易防抖
这是最直接、无需额外库的方式：每次 hover 触发时，先清除旧定时器，再设新定时器；mouseout 时也清除，防止残留。
- hover 时启动延时器（如 400ms），到期后显示 tooltip
- 如果在 400ms 内 mouseout 或再次 hover，就 clearTimeout 并重置
- 确保 tooltip 元素已存在或动态创建，且初始 hidden 或 opacity: 0
绑定事件时注意元素生命周期
如果 tooltip 是动态生成（比如每个按钮配一个），别在循环里重复绑定事件；推荐事件委托或统一管理节点。同时，避免对已销毁的 DOM 调用 show 方法（如组件卸载后定时器仍执行）。
- 给触发元素加 data-tooltip="提示文字"，统一监听 document 或父容器
- 显示前检查 tooltip 元素是否还挂载在 body 上，或用 AbortController 清理副作用
- 移动端慎用 hover —— 可改用 click 或 longpress 模拟
用 requestIdleCallback 提升响应优先级（进阶）
当页面繁忙（如动画、大量计算），setTimeout 可能延迟不准。requestIdleCallback 能让 tooltip 在浏览器空闲时才渲染，更平滑。
- hover 后不立即 set timeout，而是 queue 待机任务
- 结合 isHovering 标志位判断是否仍在悬停状态，再决定是否真正显示
- 适合复杂 SPA 场景，普通项目用 setTimeout 已足够
封装成可复用函数示例
把逻辑收拢，方便多处调用：
function initTooltip(trigger, delay = 400) {
let timer;
const show = () => { /* 显示逻辑 */ };
const hide = () => { /* 隐藏逻辑 */ };
<p>trigger.addEventListener('mouseenter', () => {
clearTimeout(timer);
timer = setTimeout(show, delay);
});</p><p>trigger.addEventListener('mouseleave', () => {
clearTimeout(timer);
hide();
});
}</p>调用时传入按钮元素和延迟毫秒数即可，支持快速接入多个 tooltip。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
