气泡定位失效的根源是参考系丢失，因position: absolute未锚定到position: relative的父容器，导致回退至body而滚动错位；须用getboundingclientrect()动态计算位置，并配合aria-describedby确保无障碍支持。
气泡定位失效的根源是参考系丢失
几乎所有“气泡飘走”“滚动后错位”“点击后出现在页面顶部”的问题，都因为 position: absolute 没锚定到正确父容器。浏览器默认把 absolute 元素相对于最近的「已定位祖先」（即 position 为 relative、absolute 或 fixed 的祖先）计算位置；若没有，就回退到 body —— 这时一滚动，气泡就飞了。
表单控件如 <input>、<select></select>、<textarea></textarea> 默认不是定位元素，所以不能直接给它们加 ::after 并期望气泡贴着它显示。
- 必须在外层包一层
<div class="form-control-wrapper">，并设 <code>position: relative - 气泡元素（
<div class="tooltip-bubble">）放在这层 wrapper 内部或挂到 <code>body下，但 top/left 必须基于 wrapper 计算 - 如果 wrapper 在 flex/grid 容器中，检查它是否被
transform或will-change创建了新层叠上下文——这会干扰绝对定位的参考系
用 getBoundingClientRect() 动态算位置比写死 top/left 可靠得多
表单控件高度常随字体、padding、border 变化，尤其 <textarea></textarea> 或带 icon 的 <input>。硬写 top: -40px 很快就会错位。
真正稳定的做法是用 JS 获取控件在视口中的坐标：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const rect = inputEl.getBoundingClientRect();
tooltipEl.style.left = `${rect.left + window.scrollX}px`;
tooltipEl.style.top = `${rect.bottom + window.scrollY + 4}px`; // 贴底部下方 4px
- 务必用
getBoundingClientRect()，不是offsetTop或clientTop—— 后者不包含滚动偏移 - 移动端需监听
touchstart替代mouseenter，否则用户点不到 - 滚动/缩放/窗口 resize 时要重新计算，否则气泡悬空；可节流调用，但别省略
箭头对不准按钮边缘？别靠猜，用 calc() 算居中偏移
伪元素箭头（如 ::before）水平居中，本质是让箭头底边中心 = 气泡水平中心 = 控件水平中心。假设箭头底边宽 12px，气泡宽度固定为 200px，控件宽 160px：
- 气泡 left 应设为
calc(50% - 80px)（控件 width / 2），再配合transform: translateX(-50%)居中自身 - 箭头 left 应设为
calc(50% - 6px)（箭头 width / 2），否则会偏右 6px - 若控件宽度不固定（比如响应式
width: 100%），就别用 CSS 算，改用 JS 动态设left值 - 箭头朝向由 border 决定：
border-top: 6px solid #333→ 向上；border-bottom: 6px solid #333→ 向下
移动端和键盘用户的气泡必须绕开 display: none
用 display: none 切换气泡显隐，会导致两次重排：一次隐藏、一次显示，视觉上“闪一下”，且 keyboard 用户无法聚焦、屏幕阅读器感知不到内容。
- 初始状态用
opacity: 0; pointer-events: none; transform: scale(0.95) - 显示时加 class 触发
transition: opacity 0.15s ease, transform 0.15s ease - 气泡元素加
tabindex="-1"，show 后立即.focus()，保证键盘 tab 可进入 - 监听
ESC键关闭，监听 document click 并event.target.closest()排除触发控件和气泡自身
最易被忽略的是：表单控件本身没 title 或 aria-describedby 关联，气泡即使显示了，对屏幕阅读器也是“不可见”的。必须配 <input aria-describedby="tooltip-id"><div id="tooltip-id" role="tooltip">...</div>。
