纯CSS Tooltip箭头需满足三硬条件：容器设position:relative、伪元素加content:""、用border三角法（四边宽相等、仅一边实色）；漏一即失效，因left:50%定位左边缘而尖端在几何中心，须配transform及精确偏移值对齐。
纯 CSS Tooltip 能做，但必须满足三个硬条件：容器设 position: relative、箭头用 border 三角法、伪元素加 content: "" 或 content: attr(...)——漏掉任意一个，箭头就飞走或根本不显示。
为什么 ::before 箭头总飘在半空？
根本原因是定位锚点错位：left: 50% 定位的是伪元素左边缘，而 border 三角的视觉尖端不在那里。比如朝上的箭头，border-bottom: 6px solid #333 的尖端实际在底边中点正上方 6px 处。
-
top值必须设为-6px（即border-width的负值），否则箭头悬空 - 必须配
transform: translateX(-50%)，只靠margin-left固定偏移会随文字长度失效 - 父容器没设
position: relative→ 伪元素会相对于body定位，箭头直接出现在页面左上角 -
::before没写content: ""→ 样式完全不生效（这是最常被忽略的“隐形错误”）
如何用 border 画出严丝合缝的箭头？
border 三角法不是“随便设三边 transparent”，而是几何强约束：四边 border-width 必须完全相等，仅一边设实色，其余三边 transparent。改一个像素，箭头就露白边或歪斜。
- 朝上箭头：
border-bottom: 6px solid #333; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 0; - 朝下箭头：
border-top: 6px solid #333; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 0; - 朝右箭头：
border-left: 6px solid #333; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 0; - 朝左箭头：
border-right: 6px solid #333; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 0; -
6px同时决定箭头大小和定位偏移量，改它必须同步调整top/bottom/left/right
怎样让 Tooltip 内容动态适配且不遮挡鼠标？
内容来自 attr(data-tooltip) 是最安全的方式，但需配合两个关键防护：
立即学习“前端免费学习笔记（深入）”；
- 给伪元素加
pointer-events: none，否则悬停时鼠标移到提示框上会触发:hover离开，导致提示框闪退 - 用
white-space: nowrap防止换行撑高容器，再配max-width: 200px+overflow: hidden控制溢出 - 过渡动画只用
opacity和visibility，不用display: none—— 后者无法触发 CSS transition - 延迟显示用
transition-delay: 0.3s，但注意：这个延迟对进入和离开都生效；如需“悬停才延迟、离开立刻消失”，得拆成两段transition
真正难的不是画出箭头，而是让 border 尖端精准咬合触发点边缘——这要求 border-width、top/bottom 偏移、transform 三者数值完全耦合，差 1px 就会露白边或悬空。响应式环境下，优先用 em 单位替代 px，避免高 DPI 屏幕下锯齿。
