title属性是兼容性最好、开销最低的悬停提示方案，但无法定制样式/位置/延迟，且移动端大多不支持；CSS+data-tip可轻量自定义，JS方案更灵活但需防事件陷阱；ARIA方案最适配无障碍需求。
title 属性是最简单有效的悬停提示方案
直接给任意 HTML 元素加 title 属性，浏览器原生支持鼠标悬停显示文字气泡，无需 JS 或 CSS。这是兼容性最好、开销最低的方式，适合基础信息补充。
常见错误是把它当成“可定制弹层”来用——title 无法控制样式、位置、延迟或内容格式（比如换行、图标、HTML 标签都会被忽略）。
<button title="点击后将清空本地缓存">清除缓存</button>- 移动端上，
title大多不触发（iOS Safari 完全不支持），别依赖它做关键提示 - 屏幕阅读器会读出
title内容，对可访问性有帮助，但若和aria-label冲突，优先用后者
用 CSS + data-tip 实现轻量自定义提示框
想改颜色、加箭头、控制出现时机？不用引入 Tooltip 库，纯 CSS 就能搞定。核心思路是用 data-tip 存提示文本，配合 :hover 和伪元素生成浮层。
关键限制：提示内容只能是纯文本，不能含链接或按钮；动画需用 transition 配合 opacity 和 visibility，只设 opacity 会导致点击穿透。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- HTML：
<span data-tip="仅支持 PNG/JPEG 格式">上传文件</span> - CSS 中必须包含
position: relative在触发元素上，否则::after无法绝对定位 - 避免在
display: inline元素（如<span>）上直接设transform动画，可能引发渲染错位
JavaScript 控制的 tooltip 更灵活但要注意事件陷阱
需要动态内容、延迟显示、跟随鼠标、或支持键盘焦点（如按 Tab 键聚焦时也显示），就得用 JS。推荐监听 mouseenter / focus 创建提示层，mouseleave / blur 移除。
最容易踩的坑是事件绑定时机和内存泄漏：如果提示层是 JS 动态插入的 DOM，没在销毁时移除事件监听，反复悬停会堆积监听器。
- 用
setTimeout实现 300ms 延迟显示，但必须在mouseleave里clearTimeout，否则鼠标快速划过多个元素会误触发 - 提示层建议用
position: fixed而非absolute，避免父容器transform或overflow: hidden把它裁掉 - 务必加
role="tooltip"和aria-hidden="true"（显示时改为false），否则对屏幕阅读器不友好
用 aria-describedby 实现语义化隐藏提示
当提示文字本质是辅助说明（比如表单字段的格式要求），更推荐用 ARIA 方案：把提示文本放在页面某处（可隐藏），再用 aria-describedby 关联到目标元素。这样既保持语义清晰，又天然支持键盘导航和读屏器。
它不产生视觉浮层，所以不是“看起来像 tooltip”，而是“行为上就是无障碍提示”。如果你的场景是表单校验、图标释义或数据列说明，这比视觉 tooltip 更靠谱。
- HTML 示例：
<input aria-describedby="email-hint"><div id="email-hint" class="sr-only">请输入公司邮箱</div> -
class="sr-only"应定义为position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;，确保隐藏但可读取 - 不要用
display: none或visibility: hidden隐藏提示文本，它们会让屏幕阅读器完全忽略
