title在移动端基本无效，因ios safari不支持hover触发、android长按极难显示，且无焦点管理、不可键盘操作；pc端也受pointer-events、overflow及空值等限制，原生机制缺陷致其无法跨端可靠使用。
title属性在移动端基本不生效，PC端也受样式和语义限制；真要跨端兼容，得放弃title，改用aria-describedby + 自定义DOM浮层。
为什么直接用title做兼容方案注定失败
浏览器对title的实现是系统级、不可控的：iOS Safari 完全不响应td或div上的悬停，安卓微信内置浏览器长按只触发复制菜单，不会弹提示；PC端还常因pointer-events: none、overflow: hidden、空格填充的title=""值被忽略——这些不是配置问题，是原生机制缺陷。
常见失效场景包括：
-
title值含"或未转义，导致HTML标签提前闭合 - 表格单元格用了
text-overflow: ellipsis但没配white-space: nowrap，悬停区域收缩为0 - 用
el-table等虚拟滚动组件时，复用td节点后title残留旧内容
PC端勉强可用的title加固写法
如果只面向Chrome/Firefox后台系统，且提示内容极简（≤25字、无HTML、无换行），可按以下方式降低失效概率：
- 把
title加在<td>或<code><th>上，别加在<code><tr>或<code><table>上（优先级无效） <li>确保该单元格有明确宽高，避免<code>display: inline或float干扰hover区域 - 移除所有祖先节点的
pointer-events: none，检查computed样式中overflow是否为visible - 后端返回的提示文本必须用
DOMPurify.sanitize()过滤，再用"替换双引号 - 结构上：
<td aria-describedby="tip-123">…</td> <div id="tip-123" role="tooltip" hidden>提示内容</div> - PC端监听
mouseenter/mouseleave，移动端监听touchstart（加setTimeout防误触） - 浮层用
position: fixed+getBoundingClientRect()动态定位，避开overflow: hidden裁剪 - 若提示需富文本（如带
<span class="status-red">异常</span>），必须用JS渲染，aria-label和title都解析不了HTML
真正跨端兼容的替代方案选型
用aria-describedby关联真实DOM节点，再通过CSS定位+JS控制显隐，才能兼顾键盘焦点、触控长按、屏幕阅读器和主题适配：
最易被忽略的一点：大量表格单元格同时挂载touchstart监听器会明显拖慢滚动性能，真实项目中应结合IntersectionObserver按需绑定，而非全局初始化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
