title属性仅在<button>、、<input>、<img>、<th>、<td>等交互或可聚焦元素上稳定生效；加在<div>、<span>等静态元素上常失效，且不支持换行、样式及移动端触发。
title 属性确实能加在任意 HTML 元素上触发原生悬停提示，但它不是“设置步骤”式的功能，而是浏览器自动响应的语义行为——写对了就显示，写错了或条件不满足就静默失效。
哪些元素加 title 才大概率显示提示
不是所有标签都稳定生效。优先用于有交互语义或默认可聚焦的元素：
-
<button>、<a>、<input>（非hidden）、<img>：基本 100% 显示，无需额外干预 -
<th>、<td>：表格单元格最可靠，<tr>和<table>次之，<tbody>等容器无效 -
<div>、<span>：可能不显示，尤其在 Firefox 或 Safari 中；若必须用，加tabindex="0"或cursor: pointerCSS -
<p>、<section>：纯静态块级元素，无交互上下文时提示常被忽略
title 值写错的常见表现和修复
提示不出现，90% 是值本身或上下文出了问题，不是浏览器 bug：
- 写成
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>或 - 和
aria-label共存时，屏幕阅读器只读后者，title仅服务鼠标用户 - 关键提示（如操作后果、必填说明）别放
title里——移动端用户根本看不到
真正需要样式、跨端一致、键盘可访问的提示，得用 aria-describedby + 真实 DOM 渲染的方案；title 只适合最轻量、最保守的补充说明，而且要随时准备它在某些设备上彻底隐身。
