真正的复用Tooltip需用Sass @mixin封装位置、箭头、动画、z-index等，仅暴露$content、$position、$delay参数；箭头用双伪元素+rem单位+calc()补偿实现像素对齐；z-index通过CSS变量控制以规避层叠上下文问题；颜色全部使用var()响应深色模式。
怎么用 Sass @mixin 写一个真正能复用的 Tooltip
直接说结论：别写成只支持单个方向或固定颜色的“玩具版”。真正的复用，得让调用方只关心“我要在哪显示、内容是什么”，其余位置、箭头、动画、z-index 全部封装进 @mixin 里。
常见错误是把 tooltip 的 HTML 结构、CSS 类名、JS 绑定逻辑全混在一起，结果每次用都要改三处。Sass 的价值在于把视觉层抽象干净，让 .btn { @include tooltip('保存成功'); } 这种写法成立。
- 必须接受
$content（字符串）、$position（top/right/bottom/left）、$delay（毫秒）三个核心参数，其他如背景色、字体大小设默认值 - 箭头要用伪元素
::before+::after双层实现，避免锯齿；$position必须同时控制 tooltip 容器位移和箭头方向/偏移 - 不要在
@mixin里写display: none或visibility: hidden—— 这些该由 JS 控制显隐，Sass 只管样式形态
为什么 Tooltip 的箭头总对不齐、边缘发虚
本质是 transform 和 border 技巧混用导致的像素对齐问题。尤其当 tooltip 启用 scale(0.95) 或 translateZ(0) 触发硬件加速后，箭头伪元素极易模糊。
真实场景中，按钮尺寸小（比如 24px 高图标按钮），箭头只有 6px，1px 偏差就明显错位。不是“调 margin 就行”，而是要统一基线计算逻辑。
立即学习“前端免费学习笔记（深入）”；
- 箭头宽度/高度必须用
rem或em，禁用px—— 确保缩放时比例一致 -
::before画底色箭头，::after叠加一层同色边框模拟“描边”，解决抗锯齿失效 - 所有
transform: translate必须用calc()补偿，例如top: calc(100% + 4px)而非top: 100%+margin-top: 4px
Tooltip 的 z-index 和触发层级为什么总被遮住
不是 z-index 数字不够大，而是没理解 stacking context 的形成条件。只要父容器有 transform、opacity 或 <code>filter，就会创建新层叠上下文，把你写的 z-index: 9999 锁死在局部。
典型翻车场景：模态框里放带 tooltip 的按钮，tooltip 死活出不来——因为模态框用了 transform: scale(0.98)。
- 在
@mixin中显式声明z-index: var(--tooltip-z, 1000)，并要求项目全局定义--tooltip-zCSS 变量 - 禁止在 tooltip 样式里写
transform动画，改用opacity+top/left位移 +will-change: opacity - 如果必须用 scale 动画，就在 tooltip 触发前临时给父容器加
transform: none !important（JS 配合）
怎么让 Tooltip 支持深色模式自动换色
靠媒体查询监听 prefers-color-scheme 不够，因为用户可能手动切换主题，且部分浏览器不支持动态响应。真正可靠的是用 CSS 自定义属性 + JavaScript 监听 storage 事件同步主题状态。
Sass 本身不能响应运行时变化，所以 @mixin 必须预留变量钩子，而不是把颜色写死。
- 在
@mixin中使用background-color: var(--tooltip-bg, #333)、color: var(--tooltip-text, #fff) - 深色模式 class（如
dark）加在上时，同步设置:root.dark { --tooltip-bg: #444; --tooltip-text: #eee; } - 避免用 Sass 的
lighten()/darken()函数生成颜色 —— 它们编译时就固化了，无法随主题实时变
最麻烦的其实是箭头阴影和边框的深色适配：别忘了给 ::before 和 ::after 也挂上 var(--tooltip-border)，否则深色下箭头会突兀地“亮着边”。
