title属性最简单但控制力弱；纯css用:hover+::after实现，需relative定位和opacity/visibility控制显隐；js方案更可靠，支持延迟、焦点、无障碍及移动端适配。
用 title 属性最简单，但控制力弱
直接写 title="这是描述" 是浏览器原生支持的 tooltip，鼠标悬停自动显示，无需 JS。但它有硬伤：无法自定义样式、位置、延迟或动画；移动端不触发（iOS Safari 基本不响应 hover）；内容过长会被截断且无换行；屏幕阅读器行为不可控。
如果你只要快速验证文案、内部工具或兼容性要求极低，title 能用，但别用在正式产品里。
纯 CSS 实现 tooltip，不依赖 JS
核心是利用 :hover + ::after 伪元素，配合 position: relative / absolute 定位。关键点在于父容器必须设 position: relative，否则绝对定位会脱出预期范围。
常见错误：display: none 写在伪元素上——不行，伪元素不能直接设 display 控制显隐；正确做法是用 opacity: 0 + visibility: hidden，再配合 transition 做淡入。
.tooltip {
position: relative;
}
.tooltip::after {
content: attr(data-tip);
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
white-space: nowrap;
}
.tooltip:hover::after {
opacity: 1;
visibility: visible;
}
使用时：<button class="tooltip" data-tip="点击后将导出全部日志">导出</button>
JS 控制 tooltip 显示时机和位置更可靠
纯 CSS 的 :hover 在触摸设备上失效，且无法做延迟显示（防误触）、点击收起、键盘焦点支持等。真实项目中建议用轻量 JS 控制显隐逻辑。
关键设计点：
- 监听
mouseenter和focus触发显示，mouseleave和blur触发隐藏（兼顾鼠标和键盘） - 用
setTimeout加 300ms 延迟，避免快速划过时闪现 - tooltip 元素应挂载到
document.body，避免父容器overflow: hidden裁剪 - 位置计算推荐用
getBoundingClientRect()，比纯 CSS 更准，尤其滚动后
示例逻辑片段：tooltipEl.style.left = (rect.left + rect.width / 2) + 'px' 配合 transform: translateX(-50%) 水平居中。
无障碍与移动端适配不能只靠视觉
仅靠 aria-label 或 title 不足以满足 WCAG。正确做法是：tooltip 内容用 role="tooltip" 标记，并通过 aria-describedby 关联触发按钮；隐藏时设 aria-hidden="true"；显示时确保能被屏幕阅读器读取。
移动端需额外处理：click 替代 hover，且点击一次显示、再点一次隐藏（toggle），或加一个关闭按钮。别指望 touchstart + hover 组合——它在多数安卓 Chrome 和所有 iOS Safari 上都不可靠。
容易被忽略的一点：tooltip 元素如果没设 pointer-events: none，鼠标移到上面会触发 mouseleave，导致立即消失——这个 bug 几乎每个手写 tooltip 都踩过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
