为防止校验提示溢出屏幕，需动态翻转弹出方向：先用 getBoundingClientRect() 获取触发元素位置，再临时渲染提示框测其尺寸，结合视口宽高与滚动偏移计算可用空间，最后按优先级模拟各方向位置并检测边界。

当自定义校验提示（如 tooltip 或 error message）出现在表单控件边缘（比如输入框右侧或底部）时，若靠近屏幕边界，直接显示会导致内容被裁剪或溢出可视区域。H5 中可通过计算提示框与视口边界的相对位置，动态翻转弹出方向（例如从「右」切到「左」，或「下」切到「上」），实现防溢出。核心是获取元素位置、视口尺寸和滚动偏移，再结合提示框宽高做边界判断。

获取关键坐标与尺寸

需准确拿到三个关键信息：

• 触发元素（如 input）的边界矩形：用 element.getBoundingClientRect() 获取相对于视口的 left、top、right、bottom、width、height；
• 提示框预估尺寸：若提示内容动态，可先将提示元素临时添加到 body 并设 visibility: hidden; position: absolute;，再调用 getBoundingClientRect() 获取宽高，之后移除或隐藏；
• 当前视口可用空间：考虑滚动位置，用 window.innerWidth / innerHeight 和 window.scrollX / scrollY 综合计算边界阈值。

判断溢出并选择最优方向

以常见「右下角弹出」为例，按优先级尝试方向（如右 → 左 → 下 → 上），对每个方向模拟位置并检测是否越界：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 「右」：提示框左 = 触发元素.right，上 = 触发元素.bottom − offset；检查 left + width > window.innerWidth + scrollX；
• 「左」：提示框右 = 触发元素.left，上同上；检查 left ；
• 「下」：提示框左 = 触发元素.left，上 = 触发元素.bottom；检查 top + height > window.innerHeight + scrollY；
• 「上」：提示框左同上，上 = 触发元素.top − height − offset；检查 top 。

选第一个不溢出的方向，并记录对应 class 或 style 偏移量（如 data-placement="left"）。

动态渲染与定位提示框

确定方向后，用 JS 设置提示框的 style.left/top 或 CSS 变量，并添加方位 class 控制箭头和动画：

• 推荐用 position: fixed（适配滚动），定位值基于 window.scrollX/Y 计算绝对坐标；
• 避免用 position: absolute 相对于触发元素（父容器 transform/scroll 影响大，易错位）；
• 为提升体验，可加 transform: translateZ(0) 触发硬件加速，减少闪动。

响应式与边界容错处理

真实场景需考虑缩放、横竖屏切换、键盘弹起（iOS Safari）、小屏设备等：

• 监听 resize 和 scroll（防抖），必要时重算位置；
• 在移动端，键盘弹出会改变 window.innerHeight，可监听 focusin/focusout 或使用 visualViewport API（较新，iOS 16.4+ 支持）；
• 预留最小安全边距（如 8px），避免贴边难点击，判断时用 left > margin && left + width ；
• 若所有方向都冲突（极窄屏或超大提示），降级为居中 modal 弹窗或 inline 提示。