title 属性无法实现自定义提示，因其不参与 DOM 渲染且不支持样式控制；应改用 data-tip 配合伪元素方案，并补充移动端和无障碍支持。
title 属性根本不能“隐藏文字再显示提示”——它只是浏览器原生的悬停气泡，不参与 DOM 渲染流程，也不支持样式控制。想用 CSS 实现「悬停显示自定义提示」，必须绕开 title，改用 data-tip + 伪元素方案。
为什么不能直接用 title 做自定义提示
很多人误以为给元素加 title="xxx" 就能自由控制提示样式，结果发现：颜色改不了、位置调不动、延迟设不上、移动端点不触发、换行被忽略、HTML 标签当纯文本显示。更关键的是，title 的内容不会出现在 DOM 中，CSS 无法选中它，伪元素也无从下手。
data-tip + ::before/::after 是最轻量的替代方案
核心思路是把提示文本存进自定义属性，用 CSS 读取并渲染为伪元素浮层。这个方案不依赖 JS，兼容性好（IE11+），且完全可控。
- HTML 中写：
<span data-tip="这是自定义提示">悬停我</span> - CSS 中写：
span[data-tip]:hover::after生成提示框，content: attr(data-tip)提取值 - 必须设置
position: relative在宿主元素上，否则absolute定位会错乱 - 用
opacity+visibility控制显隐，只设opacity: 0会导致鼠标穿透，点击不到下方元素 - 提示框默认在元素末尾右侧出现；要调整位置，改
top/left或用transform
移动端适配和可访问性容易被忽略
纯 CSS 悬停提示在触屏设备上基本失效——iOS Safari 和多数安卓浏览器不触发 :hover。如果需要响应式支持，得补 JS 监听 touchstart 切换 class，或直接改用 aria-describedby + role="tooltip" 配合 JS 显隐。
- 屏幕阅读器不会读
data-tip，必须手动绑定aria-describedby指向一个真实id的div - 若提示含重要操作信息（如“该操作不可撤销”），别只靠视觉提示，得同步写进
aria-label或旁白文本 - 动画用
transition: opacity .2s足够，避免用transform动画叠加导致 iOS 渲染卡顿
title 是错路；data-tip 是起点，但离生产可用还差一层交互健壮性和无障碍兜底。 
