Bootstrap 5配置hover触发后popover浮层位置异常跳变问题

核心问题成因 #

Bootstrap 5 的 Popover 组件底层依赖 Popper.js 完成定位计算，当仅为元素配置data-bs-trigger="hover"属性、无额外初始化参数时，会触发典型的位置计算循环：

• 悬停目标元素后，popover浮层被渲染到页面DOM中
• 浮层自身的DOM节点参与视口位置计算时，Popper会自动触发防溢出逻辑调整浮层位置
• 位置调整的瞬间，浮层与目标元素的悬停关联检测临时断开，触发popover隐藏逻辑
• 隐藏后关联检测重新恢复，又触发弹出逻辑

Chrome浏览器的鼠标事件监听优先级更高，因此该位置跳动的现象在Chrome下的出现频率远高于其他内核浏览器。

可落地的解决方案 #

• 第一步：通过JS初始化传入标准Popper配置
  不要仅依赖纯HTML属性完成Popover配置，需要在JS初始化Popover实例时，显式修正位置计算参数：

  const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  const popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl, {
      trigger: 'hover',
      popperConfig: {
        modifiers: [
          {
            // 固定浮层与目标元素的间距，避免偏移计算触发循环
            name: 'offset',
            options: {
              offset: [0, 8]
            },
          },
          {
            // 调整防溢出逻辑的计算边界，避免不必要的位置大幅偏移
            name: 'preventOverflow',
            options: {
              rootBoundary: 'document'
            }
          }
        ]
      }
    })
  })
  

• 第二步：为浮层补充基础CSS配置
  为全局的popover浮层添加样式配置，从根源上切断浮层自身的鼠标事件对触发逻辑的干扰：

  .popover {
    pointer-events: none;
  }
  

  该配置的作用是让浮层本身不响应鼠标悬停、点击事件，彻底避免鼠标在浮层区域移动时触发的状态切换循环
• 第三步：固定浮层弹出方位
  如果浮层出现频繁的上下/左右翻转跳动，可以显式固定浮层的弹出方位，关闭Popper自动翻转位置的行为：

  new bootstrap.Popover(triggerElement, {
    placement: 'top', // 固定从目标元素顶部弹出，禁用自动方位切换
    trigger: 'hover'
  })
  

注意：如果使用Bootstrap 5.0早期的正式版本，建议升级到5.3及以上的稳定版本，旧版本存在Popper实例重复绑定的已知缺陷，也会直接导致位置计算异常。

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