title属性仅在、、、、、等交互或可聚焦元素上稳定生效；加在、等静态元素上常失效，且不支持换行、样式及移动端触发。

title 属性确实能加在任意 HTML 元素上触发原生悬停提示，但它不是“设置步骤”式的功能，而是浏览器自动响应的语义行为——写对了就显示，写错了或条件不满足就静默失效。

哪些元素加 title 才大概率显示提示

不是所有标签都稳定生效。优先用于有交互语义或默认可聚焦的元素：

• <button></button>、<a></a>、<input>（非 hidden）、<img>：基本 100% 显示，无需额外干预
• <th>、<code><td>：表格单元格最可靠，<code><tr> 和 <code><table> 次之，<code><tbody> 等容器无效 <li><code><div>、<code><span></span>：可能不显示，尤其在 Firefox 或 Safari 中；若必须用，加 tabindex="0" 或 cursor: pointer CSS
• <p></p>、<section></section>：纯静态块级元素，无交互上下文时提示常被忽略

title 值写错的常见表现和修复

提示不出现，90% 是值本身或上下文出了问题，不是浏览器 bug：


Doc To HTML
使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。
下载
• 写成 title="" 或 title=" "（空格）：浏览器直接跳过，不渲染提示
• 含换行符 \n 或制表符 \t：全部压缩为空格，不会换行；别指望 title="第一行\n第二行" 生效
• 双引号未转义：title="文件名包含 "v2" 字样" 会截断属性值，应写成 title="文件名包含 "v2" 字样"
• 内容过长（>150 字符）：Chrome 截断不加省略号，Firefox 可能撑开框体但体验差，建议控制在 30–50 字内

为什么加了 title 却看不到提示

多数失效跟样式或布局有关，而非 HTML 写法：

• 父级或自身设置了 pointer-events: none：悬停事件被拦截，title 完全失活
• 元素在 overflow: hidden 容器内，且提示框位置被裁剪：滚动时提示突然消失，实际是被裁掉了
• aria-hidden="true" 同时存在：部分读屏器+浏览器组合会连带忽略 title
• 移动端（iOS Safari / Android Chrome）：没有 hover 概念，长按几乎不触发 —— 这不是 bug，是规范行为

别把 title 当 tooltip 组件来用

它只是浏览器给的一行纯文本浮层，能力边界非常明确：

• 无法加背景色、箭头、圆角、阴影，也不能控制延迟或消失时机
• 不支持 HTML 标签，<strong></strong> 或   都原样输出为文本
• 和 aria-label 共存时，屏幕阅读器只读后者，title 仅服务鼠标用户
• 关键提示（如操作后果、必填说明）别放 title 里——移动端用户根本看不到

真正需要样式、跨端一致、键盘可访问的提示，得用 aria-describedby + 真实 DOM 渲染的方案；title 只适合最轻量、最保守的补充说明，而且要随时准备它在某些设备上彻底隐身。