title属性仅在<table>、<tr>、<th>、<td>标签上生效，悬停显示单行纯文本提示；加在<tbody>等容器标签无效；不支持换行、HTML或CSS样式；移动端基本不触发；关键提示需用data-tip等替代方案并辅以title兜底。
title属性加在哪个标签上才生效
只有加在 <td>、<th>、<tr> 或表格整体 <table> 上，悬停时才会显示提示；加在 <tbody>、<thead>、<caption> 这些容器标签上无效。
最常用也最可靠的是直接写在单元格标签里：
<td title="订单状态：已发货">已发货</td>
- 加在
<tr>上时，整行 hover 都会触发同一提示，适合标注行级语义（如“该行为测试数据”） - 加在
<th>上可解释列含义（如<th title="UTC时间戳，精确到毫秒">created_at</th>） -
<table title="2024年Q3销售汇总（含未确认订单）">适合说明整个表格上下文
title提示内容换行和样式控制不了
原生 title 属性不支持换行符（\n）、HTML 标签或 CSS 样式。浏览器会自动折叠空白、忽略回车，全部渲染为单行纯文本。
如果看到换行效果，那不是 title 实现的，而是用了第三方 tooltip 库或自定义 data-* + CSS 方案。
立即学习“前端免费学习笔记（深入）”；
- 别写
title="第一行 第二行"或title="<br>"—— 没用 - 避免过长文本（超过 80 字），部分浏览器会截断且不显示省略号
- 中文标点、空格、制表符都会被压缩成单个空格，不要依赖格式对齐
移动端基本不触发title提示
iOS Safari 和多数 Android 浏览器默认不响应 title 的 hover 行为，因为没有鼠标指针概念。轻触单元格不会弹出提示，长按通常也不触发。
- 这不是 bug，是规范行为 ——
title在可访问性层面属于“辅助说明”，非交互核心功能 - 若需移动端支持，必须额外实现（例如监听
touchstart显示自定义浮层，或用aria-describedby配合屏幕阅读器） - 单纯靠
title做关键信息提示，在手机上等于没提示
替代方案比死磕title更实际
当需要换行、图标、延迟控制、键盘可访问或移动端支持时，title 就该让位了。一个轻量级但可用的 fallback 方式是结合 data-tip 和 CSS：
<td data-tip="发货时间：2024-09-15 14:22<br>物流单号：SF123456789">已发货</td>
再配简单 CSS（无需 JS）：
td[data-tip]:hover::after { content: attr(data-tip); white-space: pre-line; ... }- 这样能真正换行、控制宽度、加背景边框
- 仍要补
title作为基础可访问性兜底（屏幕阅读器会读title，不一定读data-tip） - 注意：CSS tooltip 在 touch 设备上依然需要额外逻辑激活，不能只靠
:hover
真要兼顾所有场景，就得接受：原生 title 只适合极简、桌面优先、非关键的补充说明。指望它做交互提示，迟早掉坑里。
