title属性仅触发鼠标悬停时的原生纯文本提示，不支持html、样式定制、点击交互或键盘聚焦，移动端基本无效，不能替代tooltip组件。
title属性能触发什么交互？
它只在鼠标悬停时显示纯文本气泡，不支持HTML、样式定制或点击交互。浏览器原生实现，无需JS，但行为不可控——比如延迟时间、位置、消失逻辑全由系统决定。
常见错误是以为title能做tooltip组件：加图标、换颜色、随滚动跟随，这些它都做不到。
怎么给表格单元格加title提示？
直接在<td>或<code><th>标签里写<code>title属性就行，值用双引号包裹：
<td title="订单状态：已发货">Shipped</td>
注意几点：
-
title内容会自动换行，但宽度固定（约20–25字符后折行），超长文字会被截断或显示省略号 - 空格和换行符会被压缩成单个空格，想换行得用
- 如果单元格内容本身是链接或按钮，
title仍有效，但焦点键盘导航时不会朗读（无障碍支持弱）
为什么表格里title经常不显示？
三个高频原因：
- 单元格
overflow: hidden且内容溢出——浏览器可能压根不触发title，因为元素“没被悬停到” - 用了
pointer-events: none或父级设置了title覆盖了子级 - 移动端完全不支持
title气泡（iOS/Android Safari、Chrome均无悬停概念）
验证方法：临时删掉CSS，用纯HTML测试；或者在桌面Chrome右键检查元素，看title属性是否存在且非空。
要真正可控的提示，该换什么方案？
用aria-label + CSS tooltip是最轻量替代：
<td aria-label="预计送达：2024-06-15"><span class="tooltip-trigger">Jun 15</span></td>
再配简单CSS：
.tooltip-trigger::after { content: attr(aria-label); }
但更稳妥的做法是引入title作降级，同时用data-tooltip配合JS监听mouseenter——这样既保留语义，又绕过原生限制。复杂点在于滚动时tooltip定位要重算，这点容易漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
