html无延迟控制能力，tooltip延迟需css或js实现；原生title不可配置；css方案用:hover+transition-delay配合伪元素，但移动端失效；js方案用settimeout精确控制显隐时机并解决悬停断连问题。
HTML 本身没有延迟控制能力，所有“tooltip 延迟”都靠 CSS 或 JavaScript 实现；原生 title 属性的延迟由浏览器/系统决定，不可配置，别白费劲去改它。
用 CSS :hover + transition-delay 模拟显示延迟
这是最轻量、无 JS 的方案，适合静态提示，但只支持「显示延迟」，隐藏是即时的（除非加额外技巧）。
- 必须用伪元素（如
::before或::after）承载提示内容，不能直接对display: none元素做 transition -
transition-delay只对opacity、visibility等可过渡属性生效，display不在其中 - 常见写法：
.tip::after { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; transition-delay: 0.6s; } .tip:hover::after { opacity: 1; visibility: visible; } - 注意：移动端 hover 失效，此方案在 iOS/Android 上基本不触发
用 JavaScript setTimeout 控制显示/隐藏时机
这是真正可控的方式，能分别设置「鼠标进入后多久显示」和「鼠标离开后多久隐藏」，也兼容键盘焦点（focus/blur）。
- 不要直接操作
style.display，优先用 class 切换（如tooltip--visible），方便配合 CSS 动画 - 鼠标移入时设一个
showTimer = setTimeout(...)，移出时先clearTimeout(showTimer)，再设hideTimer - 避免重复触发：每次悬停都应清除上一轮定时器，否则快速进出会导致提示闪现或卡住
- 示例关键逻辑：
element.addEventListener('mouseenter', () => { clearTimeout(hideTimer); showTimer = setTimeout(() => tooltip.classList.add('visible'), 300); });
解决「鼠标一移向 tooltip 就消失」的经典断连问题
这是纯 CSS :hover 方案最常见的体验缺陷——提示框和触发元素之间有空隙，鼠标经过时悬停状态丢失。
- 不要依赖「让 tooltip 靠近触发元素」这种玄学方式，空隙永远存在
- 正确做法：用
::before在触发元素下方撑开一块透明悬停区，把 tooltip 包进去，形成视觉连续体 - 例如：
.tooltip-trigger::before { content: ""; position: absolute; bottom: -20px; left: 0; width: 100%; height: 40px; z-index: -1; } - 这个伪元素不占布局流，但扩展了悬停热区，鼠标从触发元素滑向 tooltip 途中不会触发
:hover退出
真正难的不是“怎么加延迟”，而是「延迟时机是否与用户意图一致」：鼠标刚悬停就弹太急，移开又收太快，用户根本来不及看。建议 show 延迟设 300–500ms，hide 延迟至少 800ms，并预留 10–15px 的悬停缓冲区——这些数字不是凭空来的，是反复测试鼠标移动速度和阅读反应时间得出的实际边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
