箭头偏移不能靠top/left写死，必须用margin微调对应类名：.popover.bottom设margin-top、.popover.right设margin-left、.popover.left设margin-right；container需设为body等干净容器，且data-bs-placement必须正确设置并配合data-bs-toggle="popover"初始化。
箭头偏移不能靠 top/left 写死，必须用 margin 微调对应类名
Popper.js 每次重定位都会覆盖 top、left 等内联样式，你手动写的 top: 10px 会在滚动、resize 或内容变化后被刷掉，导致箭头“跳动”或错位。真正可控的入口是 Bootstrap 提供的方位类名 + margin 调整。
关键逻辑：data-bs-placement="bottom" → 渲染时自动加类 .popover.bottom → 对该类设 margin-top 可整体上移/下移弹窗（含箭头）；同理：.popover.right → margin-left，.popover.left → margin-right。
-
.popover.bottom { margin-top: -8px; }：负值上移，让箭头更贴近按钮底部 -
.popover.right { margin-left: 6px; }：正值右移，避免箭头撞到右侧边缘 - 别对
.arrow或伪元素单独改left/right：它依赖父容器定位，脱离上下文后容易失效
container 不为 body 时，箭头偏移会失准甚至消失
如果 Popover 被挂载在 <td>、<code><div class="card"> 或带 <code>transform 的容器里，Popper 的坐标系会被污染，箭头可能指向空白处、被裁剪，或完全不渲染。此时改 margin 也没用——因为参考点（trigger element）本身坐标已不可靠。
解决办法是强制指定干净容器：
立即学习“前端免费学习笔记（深入）”；
- HTML 写法：
data-bs-container="body" - JS 初始化：
new bootstrap.Popover(el, { container: 'body' }) - 慎用
container: 'body'在position: fixed导航栏下：滚动时可能错位，可改用container: '#main-content'
placement 设错或未初始化，箭头根本不会出现
data-bs-placement 不是“装饰属性”，它是 Popper 计算的唯一输入。漏掉它，或写错值，箭头就直接不生成。
- 只接受单值：
top/bottom/left/right——auto bottom或top-start全部无效，整个属性被浏览器忽略 - 必须配
data-bs-toggle="popover"，否则 JS 不初始化，data-bs-placement形同虚设 - 动态插入的元素（如 AJAX 加载按钮）需手动初始化：
bootstrap.Popover.getOrCreateInstance(el, { placement: 'right' })
真正容易被忽略的：触发元素必须在文档流中且坐标可读
哪怕 data-bs-placement 和 container 都对，只要触发按钮被 display: none、visibility: hidden 隐藏，或父容器有 transform、overflow: hidden，Popper 就无法获取其真实位置——箭头会飘到页面左上角，或干脆不显示。
检查方法：在控制台运行 el.getBoundingClientRect()，如果返回 { x: 0, y: 0, width: 0, height: 0 }，说明锚点已失效。此时不是 CSS 问题，而是 DOM 状态或布局干扰所致。
