如何阻止Bootstrap 5 Popover滚动时自动重定位？

Bootstrap 5的Popover依赖Popper.js实现定位，默认会开启preventOverflow功能——当Popover即将滚动出视口时，自动切换位置避免溢出。要让Popover固定在设置的右侧位置，只需禁用这个功能即可，有两种实现方式：

方式1：通过JavaScript初始化配置 #

直接在初始化Popover时，修改Popper的配置，关闭preventOverflow修饰器：

// 选中目标按钮
const targetBtn = document.querySelector('[data-bs-toggle="popover"]');
// 初始化Popover并配置Popper
new bootstrap.Popover(targetBtn, {
  placement: 'right',
  container: 'body',
  content: 'Right popover',
  popperConfig: {
    modifiers: [
      {
        name: 'preventOverflow',
        enabled: false
      }
    ]
  }
});

方式2：通过data属性直接配置 #

如果不想写额外的JS代码，可以给按钮添加data-bs-popper-config属性，传入禁用preventOverflow的JSON配置：

<button type="button" class="btn btn-secondary" 
        data-bs-container="body" 
        data-bs-toggle="popover" 
        data-bs-placement="right" 
        data-bs-content="Right popover"
        data-bs-popper-config='{"modifiers":[{"name":"preventOverflow","enabled":false}]}'>
  Popover on right
</button>

注意事项 #

禁用preventOverflow后，当页面滚动导致Popover超出视口范围时，它不会再自动切换位置，可能会出现部分或完全不可见的情况，这是预期效果——因为我们强制固定了它的初始位置。

内容的提问来源于stack exchange，提问作者Kal