title属性不是tooltip组件，而是浏览器原生的辅助文本机制，仅在鼠标悬停或键盘聚焦时弹出不可定制的小气泡；它不渲染dom、不触发重排、不支持css选择器或事件监听，仅适用于img、input、button等语义化交互元素，移动端基本无效。
title 属性不是 tooltip 组件，它是浏览器原生的辅助文本机制
它不渲染 DOM、不触发重排、不支持 CSS 选择器或事件监听——只是当鼠标悬停（或键盘聚焦）时，由浏览器在指针附近弹出一个不可定制的小气泡。你写 title="保存"，Chrome 就显示浅黄色框，Firefox 稍偏右，Safari 在 macOS 上可能延迟更长，但行为都算“符合规范”。这不是 bug，是设计使然。
哪些元素加 title 才真正可靠
只有语义上具备交互能力的原生元素，才能稳定触发提示：
-
<img>：alt 缺失时，title 可作为兜底读屏内容（但优先级低于 alt） -
<input>、<textarea></textarea>、<button></button>：浏览器普遍支持，且键盘 focus 后部分 UA 也会朗读或显示 -
<iframe></iframe>、<abbr></abbr>：有明确语义，title 被当作扩展说明处理 <div>、<code><span></span>、<svg></svg>：不保证生效 —— Chrome 可能显示，Safari 可能忽略，Firefox 已逐步降权；键盘 Tab 进去后几乎从不触发title 不显示的 4 个高频原因
不是代码写错了，而是环境阻断了触发链：
- 父级或自身设了
pointer-events: none—— 浏览器收不到 hover 事件，title 彻底失效 - 元素被
overflow: hidden或clip-path裁剪，且提示框位置恰好落在裁剪区外（尤其滚动容器内） -
title值为空格字符串（title=" "）或纯换行符 —— 浏览器视为空值，直接跳过 - 移动端 Safari / Android WebView 默认禁用 hover 提示，触控无 hover 概念，长按也不触发 title
想换行、改颜色、加箭头？title 做不到，别硬 hack
它只接受纯文本，
\n在多数浏览器里被转为空格，HTML 标签原样输出，CSS 无法选中title渲染的气泡。真要这些效果，必须切换方案：- 用
aria-describedby关联真实 DOM 元素，再用 CSS 定位 +visibility控制显隐 - 图标类按钮优先用
aria-label，而非依赖 title —— 屏幕阅读器更可靠，键盘用户也能感知 - React/Vue 中动态绑定时，用
title={item?.tip || undefined}，避免title=""触发空白提示 - 关键操作提示（如“删除后不可恢复”）必须出现在可视 DOM 中，哪怕只是小号灰色字，也比藏在 title 里强
最常被忽略的是可访问性链路：title 天然被屏幕阅读器读出，但一旦你换成自定义 tooltip，却忘了加
aria-describedby，键盘和读屏用户就完全不知道那块浮层和当前按钮有关。- 父级或自身设了
