title属性提示仅鼠标悬停触发、不可样式化、移动端基本无效，且不支持键盘导航与可访问性需求；关键提示应改用aria-label加自定义tooltip组件。
title 属性的提示文本只在鼠标悬停时由浏览器原生渲染，不支持自定义样式、不触发事件、无法用 CSS 选中或修改，且在移动端基本无效。
title 属性显示位置和触发条件
浏览器（Chrome/Firefox/Edge）会在鼠标指针停留在带 title 属性的元素上约 500–1000ms 后，在鼠标指针右下方弹出浅黄色小气泡框。这个行为完全由浏览器控制，开发者无法调整延迟、位置或外观。
常见失效场景包括：
- 元素被
pointer-events: none或父级遮挡，title不会触发 - 移动端 Safari / Chrome 中，绝大多数情况下不响应
title（无 hover 概念，且系统禁用该提示） - 屏幕阅读器对
title的支持不一致，部分会读出，部分跳过或误读为装饰性内容
替代方案：用 aria-label + 自定义 tooltip 组件
如果需要可控的提示效果（如支持 HTML 内容、动画、键盘焦点、移动端长按触发），必须放弃 title，改用组合方案：
- 用
aria-label或aria-labelledby保障可访问性（供读屏软件识别） - 用
data-tooltip存储提示文案，配合 JS 监听mouseenter/focus显示自定义 DOM 元素 - 移动端需额外监听
touchstart并加防抖，避免误触；长按 600ms 是较稳妥的触发阈值
示例最小化结构：
<button data-tooltip="删除后不可恢复" aria-label="删除当前项目">?️</button>
为什么不要用 title 做关键操作提示
title 的文本无法被选中、复制、翻译或搜索，也不参与页面语义结构。当提示内容含重要警告（如“将清空所有缓存”）、操作后果或步骤说明时，依赖 title 等于默认放弃以下用户：
- 使用键盘导航的用户（
title不响应focus） - 放大镜或高对比度模式下用户（气泡常被裁切或颜色不可读）
- 需要把提示文案粘贴给同事确认的开发者或测试人员
- 多语言站点中依赖浏览器翻译的用户（
title文本常被忽略）
真正需要提示的地方，应该让文字出现在 DOM 可见层里——哪怕只是小号灰色字放在按钮右侧，也比藏在 title 里可靠得多。浏览器原生 title 最适合的，只有极简的、非关键的、纯辅助性的标识，比如图标含义（“下载 PDF”、“分享到微信”）。
