必须用position: relative包裹触发元素，因为::before/::after的absolute定位依赖最近已定位祖先；若无relative父容器，箭头将相对body或视口定位而失控，正确做法是将按钮等放入position: relative的容器中。
为什么必须用 position: relative 包裹触发元素
因为 ::before 和 ::after 伪元素的 position: absolute 是相对于最近的「已定位祖先」计算坐标的。如果父容器没设 position: relative，箭头就会往上冒到 <body> 或视口边缘，位置完全失控。
常见错误是直接给按钮加 tooltip 类却不包一层容器，结果箭头飘在页面左上角。正确做法是：把触发元素（如 <button>）放进一个 <div class="tooltip"> 里，再对这个 div 设 position: relative。
::after 画箭头时 border-color 的顺序不能错
箭头本质是用边框拼出的等腰直角三角形，靠三边透明、一边显色实现。但 border-color 四值顺序固定为 top right bottom left，写反就指错方向。
- 箭头朝下：用
border-color: #333 transparent transparent transparent（上边显色，其余透明） - 箭头朝上：改用
border-color: transparent transparent #333 transparent（底边显色 → 实际是“上边框向下画”，所以底边显色才顶出来） - 箭头朝右：用
border-color: transparent #333 transparent transparent（右边显色）
别用简写 border: 5px solid #333——它会把四边全设成实色，三角形就变方块了。
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
立即学习“前端免费学习笔记（深入）”；
悬停失效？检查 :hover 是否作用在可交互元素上
CSS 的 :hover 在部分浏览器（尤其是 iOS Safari）中默认不触发纯 <div> 或 <span>，只响应有原生交互能力的元素，比如 <button>、<a>，或带 tabindex 的元素。
- 如果用
<div class="tooltip"><div>Hover me</div></div>，悬停大概率无效 - 改成
<div class="tooltip"><button>Hover me</button></div>或加tabindex="0"才可靠 - 移动端无 hover，所以这种 Tooltip 本质只适合桌面端辅助说明，别指望微信里点一下就弹出
内容过长时箭头偏移？别用 left: 10px 硬编码
当提示文字换行或长度变化，写死的 left: 10px 会让箭头脱离气泡中心。正确方式是让箭头水平居中对齐气泡本身：
- 给气泡设
left: 50%+transform: translateX(-50%) - 给箭头伪元素也同步用
left: 50%+transform: translateX(-50%)，而不是margin-left: -5px - 同时限制气泡宽度：
max-width: 200px+word-break: break-word，否则长单词撑破布局后，箭头位置依然错乱
真正难调的不是画出箭头，而是让箭头始终「钉在气泡视觉中心」——这要求气泡和箭头共用同一套定位逻辑，且避免任何 px 偏移值。
