表格中title属性最快但不可靠，移动端不触发、解析易失败、无障碍差；推荐用details/summary原生折叠或data-tooltip+CSS自定义方案。
表格单元格加 title 最快但最不可靠
直接在 <td>、<code><th> 或 <code><tr> 上写 <code>title="提示内容"，鼠标悬停就能弹出小黄框——这是最快实现方式，但实际用起来问题一堆：
• 移动端 Safari 和多数 Android Chrome 根本不触发（触屏没 hover）
• 内容含换行符（\n）或双引号会导致解析失败或截断
• 父容器若设了 overflow: hidden 或 pointer-events: none，tooltip 会被裁掉或压根不响应
• 屏幕阅读器对 title 的读取行为不一致，WCAG 合规性差
<details></details> + <summary></summary> 是表格里真正可用的原生交互方案
想让表格某行/某列点击展开说明？别硬套 title，用 HTML 原生折叠组件更稳：
• <summary></summary> 必须是 <details></details> 的第一个子元素，不能自闭合（<summary></summary> 会失效）
• 表格内可嵌套使用，比如给 <td> 包一层 <code><details><summary>...</summary><p>详细说明</p></details>
• 支持键盘聚焦、Enter/Space 触发，无障碍友好
• Firefox/Chrome/Safari 全支持，IE 不支持（如需兼容 IE，此方案排除）
• 默认收起，加 open 属性可默认展开：<details open><summary>点我展开</summary>...</details>
自定义 tooltip 必须用 data-tooltip + CSS 控制显隐
要跨设备、可样式化、支持富文本？绕开 title，走纯 CSS 方案：
• 给表格单元格加 data-tooltip="提示内容" 属性，不污染语义
• 用 .tooltip:hover .tooltiptext 控制显示，避免 JS 依赖
• 关键 CSS：必须设 position: relative 在父元素（如 <td>），<code>position: absolute 定位 tooltip，且 z-index 要足够高防被遮挡
• 移动端需额外加 :focus-within 或监听 touchstart（纯 CSS 无法覆盖所有触屏场景）
• 内容超长时，建议加 max-width 和 word-break: break-word 防溢出
表单类表格字段，title 别和 placeholder 混用
表格里嵌了 <input>？注意：
• title 是悬浮提示，placeholder 是输入框内占位文字，语义和触发时机完全不同
• 必填规则、格式要求（如“邮箱格式”）必须放 <label></label> 或通过 aria-describedby 关联，不能只靠 title
• disabled 或 readonly 状态下，Chrome 会忽略 title，Firefox 却仍显示——行为不一致
• 若用 React/Vue 动态渲染，JSX 中写 title={hint} 即可，但 JS 手动设置要用 el.title = hint，别用 setAttribute("title", ...)（旧 IE 兼容问题）
立即学习“前端免费学习笔记（深入）”；
真正麻烦的不是怎么加提示，而是提示在谁面前、什么时候、以什么形式出现。表格场景下，title 只适合内部管理后台的鼠标用户；对外交付或需无障碍支持时，<details></details> 或自定义 tooltip 才是实际能落地的选择。
