title属性在溢出场景下不可靠，因受系统浮层限制、浏览器隐式截断及移动端不支持；推荐用data-tooltip+css hover替代，复杂场景需js tooltip并保障无障碍。
title 属性对长文本基本不可靠——超 50 字就可能截断、不显示，或在高缩放/高分屏下彻底失效。别硬扛，换方案。
为什么 title 在溢出场景下会失效
浏览器对 title 提示框的宽度和渲染逻辑完全不开放控制：它依赖系统级浮层，受 OS 字体缩放、DPI、窗口管理器限制；Chrome/Firefox 对提示长度实际有隐式截断（通常 ≤ 1024 字符，但视觉上常 30–40 字就换行或消失）；iOS Safari 基本不响应 title 悬停；overflow: hidden 父容器虽不影响原生提示框位置，但开发者常误判为“被裁切”，实则根本没触发。
用 text-overflow: ellipsis + title 是最简 fallback，但有坑
这个组合适合纯展示、无交互、低可访问性要求的后台表格：
- 必须同时设置
overflow: hidden、white-space: nowrap、text-overflow: ellipsis，缺一不可 -
title值要和真实文本一致，否则屏幕阅读器读错 - 移动端点按不触发
title，等于零提示 - 若元素是
flex子项，需额外加min-width: 0防止 flex 伸缩撑开容器
真正可控的替代：CSS :hover + data-tooltip
不用 JS 就能实现定位精准、样式自由、支持键盘焦点的提示：
- 把提示文本存在
data-tooltip里，避免和原生title冲突 - 触发元素必须设
position: relative，否则::after会相对 body 定位 - 提示层用
visibility: hidden; opacity: 0; pointer-events: none隐藏——display: none会让屏幕阅读器跳过 - 过渡动画用
opacity+transition，比visibility更顺滑 - 如果父容器有
transform或will-change，会创建新层叠上下文，z-index失效，得给提示层加isolation: isolate或提升父级层级
复杂场景必须上 JS tooltip（如动态内容、多行、避让）
当提示需要支持 HTML、键盘导航（Tab 进入/Escape 关闭）、滚动跟随、智能避让（避开屏幕边缘），title 和纯 CSS 都扛不住：
- 手写 tooltip 必须带
aria-describedby+ 匹配的id+role="tooltip"，否则无障碍链路断裂 - 不要自己算位置——用
getBoundingClientRect()获取目标位置，再结合window.innerWidth/Height判断是否越界 - 动态加载内容时，tooltip 元素必须挂载在
body下，不能塞进局部组件 DOM 树里，否则可能被overflow: hidden截断 - React/Vue 中注意销毁时机：组件卸载时移除 tooltip 元素，否则内存泄漏
最易被忽略的一点：无论用哪种方案，title 都不该是唯一信息通道。长文本溢出时，用户第一眼看到的是省略号，第二步才悬停——这意味着主界面文案本身就得足够自解释，不能靠 tooltip 补全关键语义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
