Tooltip靠近屏幕边缘自动调整位置的本质是解决定位参考失效与边界检测缺失，需JS动态计算视口坐标并修正，CSS仅负责渲染微调；getBoundingClientRect()须结合scrollX/Y转为文档坐标，confine:true仅优先不越界而非绝对限制。
Tooltip 靠近屏幕边缘时自动调整位置，本质是解决「定位参考失效 + 边界检测缺失」两个问题。纯 CSS 无法做运行时边界判断，必须靠 JS 获取视口坐标并动态修正位置；CSS 只负责渲染和微调，不能替代逻辑。
getBoundingClientRect() 是定位起点，但不是终点
很多人直接用 elem.getBoundingClientRect() 拿到 left/top 就塞进 tooltip 的 style.left/style.top，结果一滚动就偏移、一缩放就错位。这是因为 getBoundingClientRect() 返回的是「相对于视口」的坐标，而 position: absolute 的 tooltip 默认锚定在文档坐标系里。
- 必须加上
window.scrollX和window.scrollY才能得到真实文档坐标 - 如果 tooltip 父容器有
transform或perspective，会创建新包含块，此时要改用getComputedStyle(parent).transform做补偿（极少见，但真踩过） - 移动端双指缩放时，
vw/vh单位可能跳变，定位偏移更明显——建议用px或em控制 tooltip 自身宽高与箭头尺寸
confine: true 不等于“不越界”，而是“优先不越界”
ECharts 的 confine: true 和 Bootstrap + Popper 的 flip: false 表面看是同类功能，实际行为差异很大：前者只限制 tooltip 内容不超出视口，但允许箭头部分溢出；后者禁用翻转后，连内容都可能被裁切。它们都不处理「触发元素本身就在边缘」的场景。
-
confine: true在 ECharts 中需配合appendToBody: true才生效，否则仍受父容器 overflow:hidden 截断 - Bootstrap Tooltip 默认启用
flip，关掉它（flip: false）后，若你硬设placement: 'top'，而按钮贴着顶部，tooltip 会直接向上飞出屏幕——这不是 bug，是你关掉了它的保底机制 - 真正可靠的 confine 行为，得自己写边界校验：比如计算 tooltip 高度后，判断
triggerRect.top - tooltipHeight ，再切到 bottom
伪元素箭头 + 绝对定位的响应式陷阱
用 ::after 画箭头、用 left: 50% + transform: translateX(-50%) 居中，看着简洁，但在响应式布局里极易失准。
立即学习“前端免费学习笔记（深入）”；
- 触发元素没加
position: relative？tooltip 会上溯到body定位，滚动即偏移 - 媒体查询里把触发元素设成
display: none？那 tooltip 的定位上下文就消失了，下次 show 时坐标全乱 - 箭头用
border实现，但border-width是固定像素，大屏下显得小、小屏下撑开容器——建议统一用clip-path或 SVG 内联图标替代
最易被忽略的一点：tooltip 的显示时机。用 mouseenter 立即计算位置，不如用 requestAnimationFrame 延迟到下一帧——尤其当页面刚加载或 DOM 批量插入后，layout 还没稳定，提前取 getBoundingClientRect() 会拿到错误尺寸。
