title属性仅适用于极简、非关键的补充说明，如图标用途、缩写全称或表单格式提示；内容超15汉字、需换行/样式/交互时应弃用，因其截断严重、无键盘支持、移动端基本失效，可靠替代方案为aria-label配合CSS tooltip。
title属性在什么场景下真正有用
它只适合补充极简的、非关键的说明信息，比如图标按钮的用途、缩写词全称、或表单字段的格式提示。一旦内容超过15个汉字，或者需要换行、样式、链接、交互，title 就不该用——浏览器强制截断、无样式控制、不支持键盘焦点、移动端几乎不触发。
常见误用：把操作指引（如“点击删除该行”）、错误原因（如“邮箱格式不正确”）、或重要说明塞进 title，结果用户根本看不到，尤其在触屏设备上。
替代方案：用 aria-label + CSS tooltip 更可控
当需要可靠提示时，优先用 aria-label 配合视觉 tooltip。它兼顾可访问性（屏幕阅读器读取）和视觉表现（CSS 自定义样式、延迟、定位）。
- 按钮加提示：
<button aria-label="删除当前订单"><i class="icon-trash"></i></button>，再用 CSS 为.icon-trash:hover::after生成带箭头的提示框 - 表格缩写列：
<td aria-label="United States">US</td>，避免在<abbr title="United States">US</abbr>上依赖title - 禁用状态提示：
<button disabled aria-label="暂未开通此功能">导出</button>，比title更稳定可读
必须保留 title 的少数情况
只有两个理由值得保留：兼容旧系统（如 IE8 必须靠 title 提示），或超链接地址预览（<a href="/report.pdf" title="2024年Q3销售报告（PDF，2.1MB）">下载报告</a>）。后者是浏览器原生行为，且用户习惯依赖它判断链接目标。
立即学习“前端免费学习笔记（深入）”；
注意：title 值里不要放敏感信息（如 ID、token），它会暴露在 DOM 和开发者工具中；也不要用空格或换行符试图“美化”，浏览器会忽略。
移动端悬停失效问题怎么绕过
iOS Safari 和多数安卓浏览器根本不响应 title 悬停——手指长按不会弹窗，也没有 hover 状态。别指望它在手机上起作用。
可行做法：
- 对移动优先项目，直接移除所有
title，改用 inline 文本、图标旁标注、或点击展开的details元素 - 如果必须保留，至少确保核心功能不依赖
title内容——把它当成纯装饰，而非信息通道 - 测试时真机长按验证，别只在桌面 Chrome 模拟器里看效果
最常被忽略的一点：很多人以为加了 title 就完成了无障碍支持，其实它对屏幕阅读器的支持极弱，且无法被键盘聚焦访问。真要兼顾可访问性，aria-label 或 aria-describedby 才是正解。
