Bootstrap Popover箭头方向必须通过data-bs-placement属性（值为top/bottom/left/right）指定，不可用CSS伪元素或类名硬调，否则箭头错位、消失或无法fallback。
Bootstrap弹出框（Popover）的箭头方向不能靠改CSS伪元素或加类名硬调，必须用 data-bs-placement 属性指定倾向方向，否则箭头会错位、消失或不随内容自动 fallback。
data-bs-placement 是唯一可控入口
Popover 的箭头和整体位置由 Popper.js 动态计算，data-bs-placement 告诉它“优先往哪边展开”，值只能是 top、bottom、left 或 right —— 没有 auto top 这种组合写法，也不支持 start/end 后缀。
常见错误：
- 写成
data-bs-placement="auto bottom"：整个属性被浏览器忽略，回退到默认top - 漏掉
data-bs-toggle="popover"：JS 不初始化，data-bs-placement完全不生效 - 在动态插入的按钮上没手动初始化：
bootstrap.Popover.getOrCreateInstance(el, { placement: 'right' })必须补上
箭头位置偏移只能靠 CSS 类微调 margin
设了 data-bs-placement="bottom"，不代表箭头就紧贴按钮底部——Popper 默认留出间距，且箭头中心对齐触发点。要上下/左右挪动整个弹出框（含箭头），得用对应类名改 margin：
-
.popover.bottom→ 改margin-top（负值上移，正值下移） -
.popover.right→ 改margin-left -
.popover.left→ 改margin-right
别碰 top/left 内联样式：Popper 每次重定位都会覆盖，导致移动端闪烁或错位。
container 选项决定箭头是否被裁剪或错位
如果弹出框在 modal、table td 或带 transform/overflow: hidden 的容器里，箭头常被截断或指向空白处。根本原因是 Popper 默认把弹出框 append 到触发元素的 parentNode，受父级样式污染。
解决办法是强制挂到干净容器下：
- HTML 写法：
data-bs-container="body" - JS 初始化：
new bootstrap.Popover(el, { container: 'body' }) - 慎用
container: 'body'在position: fixed导航栏下：可能因滚动错位，此时改用container: '#main-content'更稳
真正容易被忽略的是：data-bs-placement 生效的前提，不是 CSS 加载了没，而是触发元素有没有被 Popper 正确识别为 reference —— 这取决于它是否在文档流中、有没有被 display: none 或 visibility: hidden 隐藏，以及父容器是否干扰了坐标系（比如 transform）。一旦锚点失效，箭头就彻底失联。
