如何在Bootstrap 5中无需JS，通过data-bs-content实现带HTML内容的弹出框？

云上老周

2026-8-9

问题分析与解决方案

这种方式根本不可行——Bootstrap 5的data属性（比如data-bs-content）只会把值当成纯字符串处理，不会解析、执行里面的JavaScript代码。你写的箭头函数直接被当作文本显示，完全不会触发执行。

可行的替代方案

如果不想写复杂的JS初始化代码，可以用极简的JS实现需求，只需要给触发元素绑定一个简单的初始化逻辑，把目标元素的HTML作为弹出框内容：

基础示例

<a role="button"
   tabindex="0"
   data-bs-html="true"
   data-bs-sanitize="false"
   id="popover-btn"
>Show popover</a>

<div id="foo" class="d-none">
  <h5>自定义弹出框标题</h5>
  <p>这是来自隐藏元素的HTML内容</p>
  <button class="btn btn-sm btn-primary">可交互按钮</button>
</div>

<script>
// 初始化弹出框，直接指定内容为目标元素的HTML
const popoverBtn = document.getElementById('popover-btn');
new bootstrap.Popover(popoverBtn, {
  content: document.getElementById('foo').innerHTML
});
</script>

批量处理方案（适合多个弹出框）

如果页面上有多个这类弹出框，可以用通用类和自定义data属性批量初始化，不用重复写代码：

<!-- 触发元素加自定义类，用data属性指定内容来源元素ID -->
<a role="button"
   tabindex="0"
   data-bs-html="true"
   data-bs-sanitize="false"
   class="html-popover"
   data-content-from="#foo"
>Show popover</a>

<div id="foo" class="d-none">
  ...你的弹出框内容...
</div>

<script>
// 批量初始化所有带html-popover类的元素
document.querySelectorAll('.html-popover').forEach(btn => {
  const targetId = btn.getAttribute('data-content-from');
  const content = document.querySelector(targetId)?.innerHTML;
  if (content) {
    new bootstrap.Popover(btn, { content });
  }
});
</script>