纯css tooltip错位是因为触发元素未设position: relative，导致absolute定位的tooltip参照body而非预期父元素；必须将tooltip作为其直系子元素并设置父元素为relative，否则top/left失去正确参照系。
纯CSS Tooltip为什么总在错误位置出现
因为默认用 position: absolute 时，父容器没设 position: relative，导致 tooltip 相对于最近的定位祖先（可能是 body）偏移，而不是你期望的触发元素。常见现象是 tooltip 飞到页面左上角或完全错位。
必须确保 tooltip 的直接父元素（即触发元素）有 position: relative，否则所有 top/left 偏移都失去参照系。
- 触发元素（如按钮）需显式设置
position: relative - tooltip 元素用
position: absolute，top/left 基于该父元素计算 - 避免把 tooltip 放在
body底层或浮动容器外——DOM 位置影响定位上下文
如何让 Tooltip 自动适配不同方向（上/下/左/右）
CSS 本身不支持“自动判断空间并切换方向”，所谓“智能定位”必须靠 JS 检测视口边界和元素尺寸。纯 CSS 只能预设多套规则，靠开发者手动控制类名切换方向。
推荐用属性选择器 + :hover 组合，例如：
.tooltip[data-position="top"]::after {
bottom: 100%;
left: 50%;
margin-left: -6px;
border: 6px solid transparent;
border-bottom-color: #333;
}
.tooltip[data-position="right"]::after {
left: 100%;
top: 50%;
margin-top: -6px;
border: 6px solid transparent;
border-left-color: #333;
}
- 方向由
data-position属性控制，HTML 中写<span class="tooltip" data-position="top">…</span> - 箭头用
border技巧实现，注意透明边框和单色边框的顺序 - 水平居中用
left: 50%+margin-left: -半宽；垂直同理
纯CSS方案在滚动/缩放下的定位失效问题
滚动时 tooltip 不跟随触发元素，是因为 position: absolute 在滚动中不会重计算——它只在渲染时按初始 offset 定位。一旦父容器有 transform、perspective 或 will-change，还会创建新的包含块，进一步破坏定位。
- 绝对定位 tooltip 无法响应滚动，除非把 tooltip 放进触发元素内部且父元素无 transform
- 移动端双指缩放时，
vw/vh单位可能失准，建议用px或em控制箭头大小和间距 - 若触发元素在
overflow: hidden容器内，tooltip 可能被裁剪——加z-index不解决，得调整容器 overflow 或用clip-path: none
要不要用 title 属性替代自定义 Tooltip
不要。浏览器原生 title 提示不可样式化、无动画、延迟长、不支持富文本、移动端基本不触发，且无法绑定事件或键盘焦点。
真正需要可访问性（a11y）时，应结合 aria-describedby 和隐藏的 <div role="tooltip">，再用 CSS 控制显示逻辑，而非依赖 <code>title。
-
title是降级 fallback，不是实现方案 - 屏幕阅读器对纯 CSS tooltip 默认忽略，必须加
role="tooltip"和aria-hidden="true/false" - 键盘用户需要
focus触发 tooltip，而:hover不覆盖 focus 状态，得额外写:focus-within或 JS
