如何用最少脚本正确实现Bootstrap 5.3多弹出框对应自定义内容？

步骤1：修改HTML，添加关联属性 #

给每个弹出框触发元素新增data-content-id属性，绑定对应的内容容器ID，同时确保内容容器用隐藏类（比如Bootstrap自带的d-none，或你自定义的bs-none）隐藏：

<a tabindex="0" data-bs-toggle="popover" data-content-id="content1">popover 1</a>
<a tabindex="0" data-bs-toggle="popover" data-content-id="content2">popover 2</a>

<!-- 内容容器 -->
<div id="content1" class="d-none">
   <p>very long content for popover1</p>
</div>

<div id="content2" class="d-none">
   <p>very long content for popover2</p>
</div>

步骤2：极简通用脚本 #

只需要一段脚本就能初始化所有弹出框，动态匹配对应内容：

// 批量初始化所有popover
document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => {
  new bootstrap.Popover(el, {
    // 动态获取对应内容容器的HTML
    content: () => document.getElementById(el.dataset.contentId).innerHTML,
    html: true // 允许弹出框渲染HTML内容
  });
});

关键说明 #

• 关联逻辑：通过data-content-id建立触发元素和内容容器的绑定，规则清晰，扩展性强
• 复用性：如果多个弹出框需要显示相同内容，只需让它们的data-content-id指向同一个内容容器ID即可，脚本无需修改
• 极简性：不管新增多少弹出框，只要遵循上述HTML规则，这段脚本都能自动处理，无需额外编写代码

内容的提问来源于stack exchange，提问作者Newbie Web builder