纯 css 无法实现真正鼠标跟随的 tooltip，因其缺乏读取 clientx/clienty 的能力；固定偏移的 transform 方案仅模拟贴指针效果，而精准跟随必须依赖 javascript 监听 mousemove 动态设置 left/top。
为什么不能只靠 position: absolute + :hover？
直接给 tooltip 设置 position: absolute 并用 :hover 控制显隐，看似简单，但悬停位置一变，tooltip 就会固定在父容器某个角落（比如左上），完全不跟随鼠标。关键缺失的是「实时获取鼠标坐标」的能力——CSS 本身没有变量能读取 clientX/clientY，纯 CSS 无法动态计算 left/top 值。
用 pointer-events: none + transform 模拟“贴着鼠标”效果
虽然不能真正绑定坐标，但可以利用 transform: translate() 和触发元素的定位关系，让 tooltip 视觉上“紧贴鼠标指针”。前提是 tooltip 必须是触发元素的子元素，且触发元素开启 pointer-events: auto（默认），而 tooltip 自身设为 pointer-events: none，避免遮挡导致 hover 中断：
.trigger {
position: relative;
display: inline-block;
}
.trigger:hover .tooltip {
opacity: 1;
transform: translate(8px, -8px); /* 微调偏移，模拟“指针右上方” */
}
.tooltip {
position: absolute;
top: 0; left: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s, transform 0.2s;
background: #333;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
}
- 这个方案本质是“伪定位”：它不随鼠标移动，只在 hover 进入时按固定偏移显示，适合对精度要求不高的场景（如按钮旁小提示）
- 如果触发元素尺寸变化或有滚动，
transform偏移可能错位，需配合top/left调整基准点 - 移动端无效——
:hover在多数触摸设备上不触发或延迟触发
真正的“鼠标跟随”必须用 JavaScript 补足
所谓“纯 CSS 实现自动定位 tooltip”，严格来说不存在。所有号称纯 CSS 的 demo，要么是固定偏移（上一条），要么偷偷用了 JS 监听 mousemove 并写入 style.left/style.top。如果你坚持不写 JS，就只能接受静态定位；如果允许极简 JS，只需 3 行就能把 tooltip 真正粘在鼠标上：
<div class="trigger"> Hover me <div class="tooltip">I follow your cursor</div> </div>
对应 JS：
const trigger = document.querySelector('.trigger');
const tooltip = trigger.querySelector('.tooltip');
trigger.addEventListener('mousemove', e => {
tooltip.style.left = (e.clientX + 8) + 'px';
tooltip.style.top = (e.clientY - 16) + 'px';
});
- CSS 部分仍需保留
position: fixed或absolute、pointer-events: none、过渡动画等基础样式 - 注意
e.clientX/Y是视口坐标，用fixed定位最稳妥；若用absolute，需额外减去trigger.getBoundingClientRect()偏移 - 高频
mousemove可加防抖，但 tooltip 跟随通常不需要——人眼根本察觉不到毫秒级延迟
兼容性与性能的现实妥协点
即使加了 JS，也要面对两个硬限制：
- 滚动时，
clientX/Y不会自动修正，tooltip 会“飘走”；解决方案是监听scroll并重置位置，或改用getBoundingClientRect()+pageX/pageY组合计算 - CSS 动画在频繁重排下可能卡顿，建议 tooltip 使用
transform和opacity触发 GPU 加速，避免修改top/left - 如果 tooltip 内容含图片或字体加载，首次 hover 可能闪动——提前设置最小宽高或用
visibility: hidden占位更稳
真正在生产环境用的 tooltip，几乎都依赖 JS 库（如 tippy.js）处理边界检测、延迟显示、键盘导航等细节。纯 CSS 方案只适合 demo 或极简需求，别在需要精准定位、可访问性或跨设备一致性的场景里硬扛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
