title属性无法排版悬浮文字，因其样式、延迟、定位、换行、移动端支持及可访问性均由浏览器系统级控制，开发者完全无法定制；:hover+::after需触发元素设position:relative，且不支持HTML内容或键盘导航。
为什么直接用 title 属性排版不了悬浮文字
因为 title 是浏览器原生实现的提示机制，所有样式（字体、颜色、圆角、阴影、换行、定位）都由系统控制，开发者完全无法干预。它在桌面端延迟约 1 秒才出现，移动端（尤其是 iOS Safari）基本不触发，且不支持 HTML 内容或键盘焦点导航时的稳定响应。
:hover + ::after 的定位必须设 position: relative
这是最常被忽略的硬性前提：伪元素 ::after 默认相对于最近的已定位祖先（position 值为 relative、absolute 或 fixed）定位。如果漏掉这句，提示框会飘到页面左上角或跟随 body 偏移。
- 触发元素（如
<button>或<td>）必须加position: relative - 避免对
display: inline元素（如<span>）直接设transform，可能引发渲染错位 - 用
top/left配合transform: translate()实现居中，比纯left: 50%更可靠 - 移动端需额外监听
touchstart，仅靠:hover在 iOS 上无效
用 visibility 而不是 display 控制显隐
切换 display: none 会触发重排（reflow），导致下方内容突然上跳；而 visibility: hidden 保留占位空间，布局更稳定，也更适合做淡入动画（配合 opacity）。
- 必须同时控制
visibility和opacity：只设opacity: 0会导致鼠标穿透，悬停状态“黏住” -
visibility本身不能过渡，所以动画要写成transition: visibility 0.1s, opacity 0.2s - 不要用
z-index过低值（如1），表格或带transform的容器容易把提示框裁掉，建议设z-index: 1000
含 HTML 或动态内容时必须用 JS 渲染真实 DOM
伪元素 ::after 只能显示纯文本（通过 content: attr(data-tip)），无法解析 HTML 标签、绑定事件或插入图片。一旦提示需要链接、按钮、换行或异步加载，就得用 JS 动态创建 <div role="tooltip"> 并手动管理生命周期。
立即学习“前端免费学习笔记（深入）”；
- 提示层推荐用
position: fixed，避免被父级overflow: hidden或transform截断 - 每次
mouseenter创建新节点前，先清理上一个——否则快速划过多个元素会堆积 DOM 和事件监听器 - 务必设置
aria-hidden="true"（隐藏时）和aria-hidden="false"（显示时），并关联aria-describedby - 用
setTimeout延迟显示（如 300ms），但mouseleave中必须clearTimeout，否则误触发
