根本原因是position: absolute缺少可靠参照物，父容器未设position: relative导致tooltip相对于body定位，滚动时脱钩；必须将tooltip作为触发元素的直接子节点，并由css自动处理定位偏移。

为什么 tooltip 一滚动就飘走？

根本原因是 position: absolute 没有可靠参照物。浏览器会往上找最近的「已定位祖先」——如果父容器是默认的 position: static，tooltip 就直接相对于 body 定位，滚动时自然脱钩。哪怕你用 JS 算了 offsetTop，只要定位上下文缺失，数值就失去意义。

• 必须给触发元素（比如 li.card 或 button）加 position: relative
• tooltip 元素必须是它的直接子节点，不能 append 到 body
• 不要在 JS 里手动设 top/left，CSS 会自动继承滚动偏移

怎么让 tooltip 自动避开屏幕边缘？

纯 CSS 无法动态判断空间余量，但可以用 data-position 配合媒体查询 + 手动 fallback 控制方向。关键不是“自动”，而是“可预测地适配”：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 默认设为 top，用 bottom: 100% + transform: translateX(-50%) 居中
• 在小屏或顶部空间不足时，改用 data-position="bottom"，配合 top: 100% + margin-top: 8px
• 避免用 vw/vh 做箭头尺寸——双指缩放时会失准，统一用 px 或 em
• 若父容器有 overflow: hidden，tooltip 可能被裁，需确认父级是否允许溢出

箭头怎么对齐又不偏移？

伪元素 ::after 是最稳方案，靠边框三角形 + transform 微调，不依赖宽高计算：

• 箭头用 border 实现：只设单边色（如 border-bottom-color: #333），其余三边 transparent
• 水平居中统一用 left: 50% + transform: translateX(-50%)，比 margin-left: -6px 更安全
• 箭头尖角预留间隙：top 提前 6px（对应 border 宽度），再用 margin-top: -6px 往回拉
• 别给伪元素设 width/height，它本就是零尺寸三角形

移动端悬停失效怎么办？

手机没有 hover，:hover 在触摸设备上只在点击瞬间触发，且容易闪退。必须兼顾触控逻辑：

• 纯 CSS 方案只能靠 :focus-within 或 :active 做降级，但支持度有限
• 真正可靠的解法是加一层轻量 JS：监听 click 切换 is-open class，用 visibility + opacity 过渡
• 避免用 display: none/block，它会中断 transition 动画，且破坏鼠标连续性
• 记得加 aria-label 和 role="tooltip"，否则读屏器无法识别

真正的自适应不在“自动计算”，而在 DOM 结构可控、定位上下文明确、方向有 fallback、移动端有兜底。一旦把 tooltip 塞进带 position: relative 的父容器里，剩下的就只是微调和降级的事。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！