纯css工具提示必须用position:relative包裹触发元素，因absolute提示框需以它为定位参考系，否则会相对body偏移；显隐控制应优先用visibility而非opacity，避免语义和可访问性问题。
纯 CSS 实现的工具提示，核心结构必须满足「定位依赖」和「显隐控制」两个条件，否则 hover 不生效或位置错乱。
为什么必须用 position: relative 包裹触发元素
因为提示内容要用 position: absolute 定位，而它的参考系是最近的 position 非 static 的祖先。如果外层没设 relative，提示框会相对于 或其他更外层容器偏移，导致位置漂移。
- 常见错误：直接给按钮加
::after提示，但按钮父容器没设position: relative，结果提示总出现在页面左上角 - 正确写法：
<span class="tooltip">悬停我</span>，然后在 CSS 中写.tooltip { position: relative; } - 不要用
display: inline元素（如<span></span>）直接套absolute子元素——它不产生块格式化上下文，可能影响定位精度；加inline-block更稳妥
::before 和 ::after 哪个更适合放提示文本
优先用 ::after，因为语义上提示是“附加信息”，且避免与已有 ::before 冲突（比如图标类项目常用 ::before 插入 icon）。
-
::after的content可直接读取data-tooltip属性：content: attr(data-tooltip); - 不能用
content: "文本"硬编码——无法复用，也不支持动态内容 - 若需支持换行或 HTML 内容，
::after无能为力，必须改用真实 DOM 元素（如<div class="tooltiptext">） <h3>显隐控制用 <code>visibility还是opacity用
visibility: hidden / visible，别用opacity控制显示隐藏。-
opacity: 0仍占据渲染空间、可被聚焦、屏幕阅读器可能读取——不符合 tooltip 的语义和交互预期 -
visibility: hidden完全脱离可访问性树，且不触发布局重排，性能更好 - 配合
transition时，visibility本身不可动画，所以通常组合使用：opacity做淡入淡出，visibility控制是否参与渲染
最易被忽略的是
z-index层级和父容器overflow: hidden的冲突——如果 tooltip 父元素设置了overflow: hidden，提示框会被直接裁剪，哪怕z-index很高也无效。 -
