CSS无法用字符串变量（如--tooltip-position: "top"）直接驱动top/left等属性的条件计算，必须由JS判断方位后写入数值型CSS变量（如--tooltip-translate-y），再由CSS消费，否则会因语法错误失效。
Tooltip方位参数怎么用CSS变量传进去
不能直接把top、left值写死，得靠CSS变量动态控制气泡箭头和内容框的位置。核心是：用一个--tooltip-position变量接收字符串（如"top"、"right"），再用var(--tooltip-position)配合calc()或position: absolute偏移逻辑来驱动布局——但注意，CSS原生不支持“根据变量值分支计算”，所以必须配合@property或预设类名兜底。
实际项目中更可靠的做法是：只用CSS变量存数值型偏移量，方位逻辑交给类名或JS判断后设置具体变量值。比如：--tooltip-arrow-offset: 8px、--tooltip-translate-x: 0、--tooltip-translate-y: -12px，然后在:before和:after里统一用这些值做位移。
为什么不能用--tooltip-position: "bottom"直接驱动top/bottom属性
CSS不支持基于字符串变量的条件渲染。写top: calc(var(--tooltip-position) === "bottom" ? "-10px" : "auto")会直接报错——语法无效，浏览器根本不认===或三元操作符。
-
--tooltip-position只能作为标记，不能参与运算分支 - 所有位置计算必须提前展开为数值型变量（
--tooltip-top、--tooltip-left等） - 若坚持纯CSS，需为每种方位写一套独立规则，用
[data-tooltip-position="bottom"]这类属性选择器切换
推荐做法：JS设置方位变量 + CSS数值变量联动
让JS负责判断方位并写入具体数值，CSS只管消费。这样既灵活又不破坏可维护性。
示例流程：
${(rect.left + rect.width / 2) - tooltipRect.width / 2}px
对应CSS里直接用：
.tooltip {
transform: translate(
var(--tooltip-translate-x),
var(--tooltip-translate-y)
);
}
.tooltip::before {
transform: translate(
var(--tooltip-arrow-translate-x),
var(--tooltip-arrow-translate-y)
);
}
容易被忽略的边界问题
自动定位不是算完坐标就完事。真实场景下这些点常被跳过：
- 滚动时
getBoundingClientRect()失效，需监听scroll并重算，或改用IntersectionObserver+position: fixed - tooltip内容宽度动态变化（比如多语言），会导致
translate-x偏移不准，建议用left: 50%+transform: translateX(-50%)居中 - 箭头方向和边框颜色要随方位同步更新，别只动位置不动
border-color，否则出现“箭头朝上但边框色在底部”的错位 - 移动端触摸触发时，
focus和hover行为不一致，纯CSS方案在iOS上可能完全不触发:hover
方位逻辑越复杂，越该把计算收口到JS里，CSS变量只做“数据管道”，别让它承担判断职责。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
