title属性最简单但控制力弱；css+aria-label可轻量自定义气泡；javascript方案最可靠，适用于html内容、移动端及复杂交互场景。
用 title 属性最简单，但控制力弱
直接加 title 是最快实现气泡提示的方式，浏览器原生支持，不用写一行 JS 或 CSS：
<button title="点击后将清空本地缓存并刷新页面">清除缓存</button>
但它有几个硬伤：
• 气泡样式完全不可定制（字体、颜色、圆角、箭头都改不了）
• 出现延迟固定（通常 500ms 左右），无法调整或取消
• 不支持 HTML 内容（换行、链接、图标全失效）
• 移动端几乎不触发（iOS Safari 默认禁用 title 悬停）
用 CSS + aria-label 实现轻量自定义气泡
适合需要统一风格、又不想引入 JS 的场景。核心是用 :hover 控制伪元素 ::after 显示，配合 aria-label 保无障碍访问：
<button aria-label="导出为 CSV 格式，包含全部字段与时间戳">导出数据</button>
对应 CSS：
button[aria-label] { position: relative; }<br>button[aria-label]::after {<br> content: attr(aria-label);<br> position: absolute;<br> bottom: 120%; left: 50%;<br> transform: translateX(-50%);<br> background: #333; color: #fff;<br> padding: 4px 8px; font-size: 12px;<br> border-radius: 4px; white-space: nowrap;<br> opacity: 0; visibility: hidden;<br> transition: opacity .2s, visibility .2s;<br>}<br>button[aria-label]:hover::after {<br> opacity: 1; visibility: visible;<br>}
注意点：
• aria-label 值会被屏幕阅读器读出，务必准确描述功能
• white-space: nowrap 防止长文本折行导致气泡错位
• 如果按钮有 padding 或 border，需微调 bottom 和 transform 值
用 JavaScript 监听 mouseenter/mouseleave 更可靠
当提示内容含 HTML、要支持点击关闭、或需适配移动端触摸时，必须上 JS。关键不是“做气泡”，而是“控制显示时机和位置”：
常见错误：
• 直接用 onmouseover 导致气泡在子元素上反复触发（鼠标进出文字、图标时闪动）
• 用 offsetTop/Left 计算位置，忽略滚动偏移和缩放
推荐做法：
• 绑定 mouseenter 和 mouseleave（非 mouseover）
• 用 getBoundingClientRect() 获取按钮真实视口位置
• 气泡元素插入 body，避免被父容器 overflow: hidden 截断
• 加防抖：鼠标快速划过多个按钮时，只显示最后一个的提示
示例片段（无框架）：
const tooltip = document.createElement('div');<br>tooltip.className = 'custom-tooltip';<br>document.body.appendChild(tooltip);<br><br>button.addEventListener('mouseenter', (e) => {<br> const rect = e.target.getBoundingClientRect();<br> tooltip.style.left = `${rect.left + window.scrollX}px`;<br> tooltip.style.top = `${rect.top + window.scrollY - 10}px`;<br> tooltip.textContent = e.target.dataset.tip || '';<br> tooltip.style.display = 'block';<br><br>button.addEventListener('mouseleave', () => {<br> tooltip.style.display = 'none';<br><h3>移动端适配不能只靠 hover</h3><p>纯 <code>:hover</code> 在 iOS 和 Android Chrome 上基本失效——手指点一下是“激活”，不是“悬停”。真正可行的方案只有两个：</p><p>• 方案一：保留 <code>title</code> 作为降级（虽然丑，但至少有信息）<br>• 方案二：改成交互式弹出（例如点击按钮后显示气泡，再点空白处关闭）</p><p>如果选方案二，注意：<br>• 不要用 <code>click</code> 简单 toggle，否则跟按钮主功能冲突（比如按钮本身是提交表单）<br>• 推荐加一个独立的 <code>?</code> 图标按钮，或使用 <code>longpress</code>（300ms 以上）触发提示<br>• 所有气泡必须支持键盘 <code>Esc</code> 关闭和 <code>Tab</code> 跳转，否则 WCAG 不合规</p><p>气泡类名别用 <code>tooltip</code> 这种泛称，建议带上下文，比如 <code>btn-export-tip</code>，方便后续定位和覆盖样式</p>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
