Bootstrap 5 popover组件无法正常打开 代码配置问题排查求助

核心问题定位 #

你当前的代码有两个直接导致popover失效的错误：

• 依赖引入错误：bootstrap.bundle.min.js 本身已经内置了对应版本的Popper依赖，不需要额外单独引入Popper文件。你当前重复引入Popper的同时，还把Popper文件和Bundle文件的SRI完整性校验值写成了完全相同的内容，会触发浏览器资源校验失败，导致Bootstrap脚本无法正常加载，全局bootstrap对象注册失败，popover初始化逻辑直接报错。
• 初始化执行时机风险：如果popover初始化代码在DOM元素渲染完成前执行，document.querySelectorAll无法选中目标元素，不会绑定任何popover实例，自然无法触发弹出。

修复步骤 #

1. 修正脚本依赖引入 #

删除单独引入的Popper脚本，仅保留正确的Bootstrap Bundle引入即可：

<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
  crossorigin="anonymous"
></script>

如果你坚持要单独引入Popper，需要把引入的bootstrap.bundle.min.js替换为不包含Popper的普通版bootstrap.min.js，同时保证两个资源的SRI哈希值和对应版本官方公布的值完全一致，不要混用哈希。

2. 调整初始化代码执行时机 #

二选一即可：

• 方案一：把popover初始化代码移动到所有DOM元素的末尾，即</body>闭合标签之前，保证执行时页面上的目标元素已经渲染完成，原有初始化代码不需要修改：

var popoverTriggerList = [].slice.call(
  document.querySelectorAll('[data-bs-toggle="popover"]')
);
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl);
});

• 方案二：如果初始化代码需要放在页面头部等DOM渲染前的位置，给逻辑添加DOMContentLoaded事件监听，等DOM树解析完成后再执行初始化：

document.addEventListener('DOMContentLoaded', function () {
  var popoverTriggerList = [].slice.call(
    document.querySelectorAll('[data-bs-toggle="popover"]')
  );
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl);
  });
});

校验方法 #

修改完成后可以打开浏览器开发者工具做快速校验：

• 查看Console面板，如果出现bootstrap is not defined报错，说明Bootstrap脚本依然没有加载成功，重点检查脚本路径、SRI配置是否正确
• 在控制台执行document.querySelectorAll('[data-bs-toggle="popover"]')，如果返回的节点列表长度为0，说明初始化代码执行时机依然过早，没有选中目标元素
• 你的popover配置的触发方式是hover，修复完成后鼠标悬停在Service Ports文本上，就会正常弹出顶部方向的popover提示。

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