layer.tips 默认不支持鼠标移出延迟关闭，需手动监听 mouseenter/mouseleave 事件并用 setTimeout + layer.close() 实现，关键要清除旧定时器、禁用 time 参数、保存并校验 tipsIndex。
layer.tips 默认不支持鼠标移出延迟关闭，必须手动接管
layer.tips 的 time 参数只控制「自动关闭时长」，且一旦设置就会在弹出后无条件倒计时关闭，和鼠标悬停状态无关。它本身没有 mouseout 或 delay 类型的内置配置。想实现“鼠标移开后延迟关闭”，得放弃依赖 time，改用事件监听 + 手动 layer.close()。
正确做法：绑定 mouseenter/mouseleave + setTimeout 管理关闭时机
核心逻辑是：鼠标进入目标元素时显示 tips，同时清除可能存在的待关闭定时器；鼠标离开时启动一个新定时器，超时才调用 layer.close()。关键点在于定时器必须可被覆盖，避免多次移入移出触发多个冲突关闭。
- 用
layer.tips()返回的 layer index 保存起来，后续关闭时传给layer.close() - 每次
mouseenter都要调用clearTimeout()清掉旧定时器，否则会提前关掉正在显示的 tips - 不要在
layer.tips()里设time，否则它会在你还没来得及操作前就自己关了 - 延迟时间（比如 300ms）建议设短一点，太长会让用户觉得响应迟钝；太短（
let tipsIndex = null;
let closeTimer = null;
const target = document.getElementById('my-btn');
target.addEventListener('mouseenter', () => {
clearTimeout(closeTimer);
if (!tipsIndex) {
tipsIndex = layer.tips('这是提示内容', target, {
tips: [1, '#333'],
time: 0 // 关键：禁用自动关闭
});
}
});
target.addEventListener('mouseleave', () => {
closeTimer = setTimeout(() => {
if (tipsIndex) {
layer.close(tipsIndex);
tipsIndex = null;
}
}, 300);
});
常见踩坑：重复触发、index 失效、tips 被遮挡
实际调试中这几个问题最频繁：
-
tipsIndex没清空或没判空就重复调layer.tips()，会导致多个 tips 叠加，关闭时只关掉最后一个 - 目标元素是动态生成的（比如 Vue 渲染后插入），事件绑定必须在元素存在后再执行，否则监听无效
- 如果页面有滚动或定位变化，tips 可能脱离目标元素漂移 —— 这不是延迟关闭的问题，而是
tips的follow行为未生效，需确认是否传了正确的 DOM 元素引用（不能传字符串选择器） - 移动端没有
mouseenter/mouseleave，要用touchstart/touchend替代，且要考虑点击穿透和延迟触发问题
替代方案：用 layer.open 模拟 tips 更可控
如果业务需要更复杂的交互（比如 hover 时还能点击、带按钮、支持键盘 focus），layer.tips() 的限制太多。这时直接用 layer.open() 配合 type: 4（即页面元素弹层），再手动定位到目标元素右下角，反而更稳定。
- 用
content: $('#my-tips-el')引入一个隐藏的<div>，避免内联字符串拼接 HTML <li>通过 <code>success回调获取弹层 DOM，再用getBoundingClientRect()计算目标位置并css()定位 - 所有事件（
mouseenter、mouseleave、click）都可自由绑定，不受layer.tips()内部逻辑约束
复杂交互场景下，这点额外代码换来的可控性，远比硬啃 tips 的局限值得。
真正麻烦的不是写几行定时器，而是忘记清定时器、忽略动态元素绑定时机、或者误以为 time 能响应鼠标事件 —— 这些才是上线后突然失效的根源。
