最可靠纯CSS Tooltip箭头用::before和::after伪元素通过border技巧生成等腰直角三角形，三边透明、一边显色，配合position: absolute精确定位到Tooltip边缘，需父容器设position: relative并用em/rem控制尺寸以避免锯齿。
用 ::before 和 ::after 生成三角形箭头最可靠
纯 CSS Tooltip 的箭头本质是用伪元素画一个等腰直角三角形，靠 border 技巧实现。不能依赖 SVG 或图片，否则就不是“纯 CSS”了。关键在于把不需要的三边设为透明，留出一边显色，并精确定位到 Tooltip 框边缘。
常见错误是箭头位置偏移、边缘露白、或在缩放/高 DPI 屏幕下模糊。这是因为没重置 box-sizing 或用了 px 固定偏移，导致响应失效。
- 箭头必须用
position: absolute定位，父容器（Tooltip）需设position: relative - 优先用
em或rem控制箭头尺寸，例如border-width: 0.4em 0.4em 0 0，避免像素锯齿 - 若 Tooltip 出现在元素右侧，用
::before画左指箭头；出现在顶部，则用::after画下指箭头更易控制层级 - 加
pointer-events: none到伪元素上，防止遮挡鼠标事件
Tooltip 触发时机只能靠 :hover 或 :focus 实现
没有 JS 就没法监听 click 或 touch，所以纯 CSS Tooltip 只能响应悬停或键盘焦点。这意味着移动端体验受限——iOS Safari 默认不触发 :hover，且点击后不会自动隐藏。
使用场景很明确：仅限桌面端辅助提示，比如表单标签旁的说明、图标旁的操作提示。别指望它在微信内嵌浏览器或安卓 WebView 里稳定展开。
立即学习“前端免费学习笔记（深入）”；
-
:hover需作用于有交互能力的元素（<button>、<a>、带tabindex的<span>），纯<div>默认无法 hover - 要支持键盘导航，必须加
tabindex="0"并用:focus写同样样式，否则残障用户不可用 - 不要嵌套太多层级，CSS 选择器如
.tooltip:hover .tooltip-content在旧版 Edge 中可能失效
内容换行和最大宽度要用 max-width + word-break
Tooltip 文字一长就撑破容器或溢出屏幕，尤其在小屏上。CSS 没有“自动换行并保持箭头对齐”的内置逻辑，得手动约束。
很多人试过 white-space: normal 却发现箭头位置错乱，是因为没同步调整伪元素的 left/top 值——它们是按固定宽度假设定位的。
- 给 Tooltip 内容设
max-width: 200px（根据设计定，别用百分比） - 加
word-break: break-word或overflow-wrap: break-word，确保长单词也能折行 - 如果内容动态长度变化大，箭头水平居中建议用
left: 50%+transform: translateX(-50%)，而不是写死left: 10px - 避免用
display: inline-block包裹内容，它会让max-width失效
IE11 及以下不支持 clip-path 和 filter: drop-shadow()
想加圆角阴影？别用 filter: drop-shadow()，IE11 不识别，而且会把箭头也模糊掉。圆角本身可用 border-radius，但箭头伪元素必须单独处理圆角裁剪——而 IE11 不支持 clip-path。
实际做法是放弃阴影，或退化为 box-shadow（仅作用于 Tooltip 主体，不影响箭头）。很多项目卡在这一步，硬加 clip-path: polygon() 导致整个 Tooltip 在旧浏览器消失。
- 测试时务必在真实 IE11 环境跑，Edge 的“IE 模式”模拟不准
- 箭头颜色若需渐变，IE11 完全不支持，老老实实用单色
border-color - 如果必须兼容，把箭头做成两个重叠伪元素：外层浅灰
border模拟阴影，内层主题色，视觉上凑合
transform 和 margin 微调都得实测，不能只靠理论值。 
