气泡箭头自适应核心是用getboundingclientrect()获取触发元素视口坐标，结合空间判断（如rect.top与window.innerheight-rect.bottom比较）动态选定上下左右方向，并通过data-placement驱动css伪元素精准定位与朝向。
箭头方向自适应的核心逻辑
气泡箭头要“自动对准”触发元素，不能靠固定写死 top/left。关键在于：先获取触发元素在视口中的真实位置（getBoundingClientRect()），再结合气泡自身宽高、目标显示方向（上/下/左/右）、以及可用空间（比如是否临近屏幕边缘或滚动容器边界），动态决定箭头该朝哪边、根部该落在哪。
判断方向的实用策略
不依赖复杂算法，用几个简单条件就能覆盖多数场景：
- 计算触发元素顶部距视口顶部距离（rect.top）和底部距视口底部距离（window.innerHeight - rect.bottom）；若顶部空间更小，优先选“下方”显示，箭头朝上
- 同理，比较左右两侧空间：rect.left vs window.innerWidth - rect.right；左侧太窄就往右出，箭头朝左
- 若上下都够但左右局促，优先选上下；若上下也不足（如元素在页面中部但气泡很高），可降级为“居中悬浮”，箭头隐藏或改为圆点
- 移动端要考虑触摸热区，避免箭头太细难点击，建议最小宽度设为 12px，高度 8px
箭头定位与 CSS 配合要点
方向确定后，箭头需精准贴合气泡边缘并指向触发点中心：
- 气泡容器必须设 position: relative，箭头用伪元素（::before 或 ::after）绝对定位
- 箭头朝下时：top: 100% + left: calc(50% - 6px)（假设三角底宽 12px）；朝右时：left: 100% + top: calc(50% - 6px)
- 若触发元素高度动态（如多行文字按钮），不要硬写 top: 20px，改用 JS 计算：top = rect.height / 2 - tooltip.offsetHeight / 2
- 避免父容器有 overflow: hidden 或 transform，否则可能裁剪箭头；稳妥做法是让气泡用 position: fixed
一次到位的 JS 小函数示例
绑定到触发事件（如 click 或 mouseenter）中即可：
function positionTooltip(triggerEl, tooltipEl) {
const rect = triggerEl.getBoundingClientRect();
const tooltipRect = tooltipEl.getBoundingClientRect();
const spaceTop = rect.top;
const spaceBottom = window.innerHeight - rect.bottom;
const spaceLeft = rect.left;
const spaceRight = window.innerWidth - rect.right;
<p>let placement = 'bottom';
if (spaceTop > spaceBottom && spaceTop > tooltipRect.height) placement = 'top';
else if (spaceLeft > spaceRight && spaceLeft > tooltipRect.width) placement = 'left';
else if (spaceRight > tooltipRect.width) placement = 'right';</p><p>tooltipEl.dataset.placement = placement;</p><p>switch (placement) {
case 'top':
tooltipEl.style.top = <code>${rect.top - tooltipRect.height - 8}px</code>;
tooltipEl.style.left = <code>${rect.left + rect.width / 2 - tooltipRect.width / 2}px</code>;
break;
case 'bottom':
tooltipEl.style.top = <code>${rect.bottom + 8}px</code>;
tooltipEl.style.left = <code>${rect.left + rect.width / 2 - tooltipRect.width / 2}px</code>;
break;
case 'left':
tooltipEl.style.top = <code>${rect.top + rect.height / 2 - tooltipRect.height / 2}px</code>;
tooltipEl.style.left = <code>${rect.left - tooltipRect.width - 8}px</code>;
break;
case 'right':
tooltipEl.style.top = <code>${rect.top + rect.height / 2 - tooltipRect.height / 2}px</code>;
tooltipEl.style.left = <code>${rect.right + 8}px</code>;
break;
}
}</p>
HTML 中通过 data-placement 控制箭头伪元素显隐和方向样式，CSS 只需几组对应规则即可。
