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只管消费。这样既灵活又不破坏可维护性。
立即学习“前端免费学习笔记（深入）”；
示例流程：
const tooltip = document.querySelector('.tooltip');
const rect = trigger.getBoundingClientRect();
const tooltipRect = tooltip.getBoundingClientRect();
<p>// 计算理想方位（比如优先top，空间不够就换bottom）
let pos = 'top';
if (rect.top < tooltipRect.height + 10) pos = 'bottom';</p><p>// 写入4个关键偏移变量
tooltip.style.setProperty('--tooltip-translate-x', <code>${(rect.left + rect.width / 2) - tooltipRect.width / 2}px</code>);
tooltip.style.setProperty('--tooltip-translate-y', pos === 'top' ? <code>-${tooltipRect.height + 8}px</code> : <code>${rect.height + 8}px</code>);
tooltip.style.setProperty('--tooltip-arrow-translate-x', <code>${rect.left + rect.width / 2 - 8}px</code>);
tooltip.style.setProperty('--tooltip-arrow-translate-y', pos === 'top' ? '100%' : '0');对应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变量只做“数据管道”，别让它承担判断职责。
