Bootstrap 5 Popover 位置由 data-bs-placement 属性指定倾向方向（top/bottom/left/right），受视口限制自动 fallback，需结合 container 选项解决遮挡，并用 CSS 类如 .popover.bottom 调整 margin 微调偏移。
data-bs-placement 属性控制基础方位
bootstrap 5 的 popover 默认从触发元素顶部（top）弹出，但实际显示位置受视口空间限制，不是“绝对固定”。要指定倾向方向，必须用 data-bs-placement 属性，值为 top、bottom、left 或 right。
- 写在 HTML 中最直接：
<button data-bs-toggle="popover" data-bs-placement="bottom" title="提示" data-bs-content="内容">点我</button> - JavaScript 初始化时也可传参：
new bootstrap.Popover(el, { placement: 'right' }) - 注意：如果设了
bottom却在页面最底部触发，Popper.js 会自动 fallback 到top—— 这是正常行为，不是 bug
定位偏移需改 CSS 变量或类选择器
单纯设 data-bs-placement="bottom" 不等于弹出框就“紧贴按钮下方”，它默认有间距，且箭头指向触发点中心。若想微调垂直/水平偏移（比如让弹窗上移 10px 指向父级「更多」按钮），不能靠 top/left 写死，得用 Bootstrap 提供的类钩子：
- 先确认你用的是哪个 placement，比如
bottom→ 对应类名是.popover.bottom - 加 CSS 调整 margin：
.popover.bottom { margin-top: -12px; }（负值上移，正值下移） - 同理：
.popover.right { margin-left: -8px; }，.popover.left { margin-right: -8px; } - 别用
!important强覆盖top/left—— 它们是 Popper 动态计算后内联写的，每次重定位都会被刷掉
container 选项解决父容器遮挡或定位错乱
当触发按钮在 overflow: hidden、transform 或 position: relative 的容器里时，Popover 常常被裁剪、错位，甚至完全不显示。根本原因是 Popover 的 DOM 被 append 到触发元素附近，受父级样式影响。
- 强制把弹出框挂到
下：new bootstrap.Popover(el, { container: 'body' }) - 或者指定一个干净的祖先容器：
{ container: '#main-content' } - HTML 中等效写法：
data-bs-container="body" - 不设
container时，Popover 会尝试插在触发元素的parentNode里，这在 modal、dropdown、table td 内极易出问题
placement=auto 不是万能解，慎用组合值
data-bs-placement="auto" 听起来智能，但它只做单次计算，且不支持像 auto top 这样的组合写法（那是旧版 Bootstrap 4 的语法，5 已废弃）。新版只接受单值 + 自动 fallback。
- 不要写
data-bs-placement="auto bottom"—— 浏览器会忽略整个属性 - 真需要“优先 bottom，不行再 right”，得靠 JS 监听
show.bs.popover事件，读取popover._popper.state.placement，再手动调整 DOM（复杂且易破） - 更稳的方案：固定用
bottom，再配合container: 'body'和 CSS margin 微调，比依赖 auto 更可控
