layer.tips 默认按 tips 参数指定方向（1上、2右、3下、4左）显示，不自动避让或适配视口边界，需手动计算各方向可用空间并选择最大留白方向。
layer.tips 默认方向逻辑是什么
layer.tips 不是“自动避让”型弹层，它默认只按 tips 参数指定的方向（1–4）显示：1 上、2 右、3 下、4 左。它**不会主动检测窗口边界或元素可视区域**，更不会像 layer.open 那样内置方位自适应逻辑。所谓“自动调整方向”，其实是靠你手动触发重定位 + 条件判断实现的。
怎么手动判断并切换 tips 方向
核心思路是：获取目标元素位置、计算其与视口四边距离，再选留白最多的方向。关键依赖 getBoundingClientRect() 和 document.documentElement.clientHeight / .clientWidth：
const el = document.querySelector('#trigger');
const rect = el.getBoundingClientRect();
const viewportHeight = document.documentElement.clientHeight;
const viewportWidth = document.documentElement.clientWidth;
<p>// 计算各方向可用空间
const spaceTop = rect.top;
const spaceRight = viewportWidth - rect.right;
const spaceBottom = viewportHeight - rect.bottom;
const spaceLeft = rect.left;</p><p>// 找出最大空间对应的方向（1=上, 2=右, 3=下, 4=左）
let bestDir = 3; // 默认向下
if (spaceTop > spaceBottom && spaceTop > spaceLeft && spaceTop > spaceRight) bestDir = 1;
else if (spaceRight > spaceTop && spaceRight > spaceBottom && spaceRight > spaceLeft) bestDir = 2;
else if (spaceBottom > spaceTop && spaceBottom > spaceRight && spaceBottom > spaceLeft) bestDir = 3;
else if (spaceLeft > spaceTop && spaceLeft > spaceBottom && spaceLeft > spaceRight) bestDir = 4;</p>
然后调用 layer.tips(content, follow, {tips: [bestDir, '#color']}) 即可。
为什么直接用 tipsMore: true 不行
tipsMore: true 是个常见误解点——它**仅控制是否显示小箭头旁边的“更多”文字（即「查看更多」链接）**，和方向无关，文档里也没提自动适配。这个配置项常被误读为“智能模式”，实际完全不影响方位选择逻辑。
- 它不改变
tips[0]的取值，也不监听滚动/缩放 - 即使开启，
layer.tips仍会严格按你传入的tips: [1, ...]往上贴，超出视口就截断或隐藏 - 移动端尤其明显：竖屏切横屏后，原方向可能完全不可见，但 layer 不会重算
真实项目中要注意的坑
实际嵌入业务时，这几个细节最容易导致“看似自动、实则错位”：
- 触发元素若在
overflow: hidden容器内，getBoundingClientRect()返回的是相对容器而非视口的坐标，需逐级向上累加 offset - 页面有横向滚动条时，
document.documentElement.clientWidth不含滚动条宽度，但rect.right包含，需统一用window.innerWidth更稳妥 -
layer.tips本身不支持传入函数式tips，所以无法像layer.open那样用area回调动态改位置——必须先算好方向再调用 - 如果触发元素是动态渲染的（如 Vue 的 v-if），要确保 DOM 已挂载、尺寸已计算完成后再调用，否则
rect可能为 0
方向自适应这事，Layer 没替你做，就得自己掐着像素算。边界判断看着简单，但滚动、缩放、iframe、fixed 定位元素一掺和，rect 值就容易失真——别省那几行坐标校验代码。
