如何为Bootstrap Popover添加sanitize: false配置项？

要在Bootstrap 5 Popover里显示按钮，你需要解决两个核心问题：关闭默认的HTML内容清理机制，以及修正代码中动态修改内容的错误。以下是具体方案：

1. 初始化Popover时添加sanitize: false选项 #

Bootstrap默认会对Popover的内容进行HTML清理，导致按钮这类HTML标签被过滤掉。你需要在创建Popover实例时显式关闭这个功能，同时可以直接配置包含按钮的内容：

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
  // 初始化时传入配置选项，关闭sanitize并自定义带按钮的内容
  return new bootstrap.Popover(popoverTriggerEl, {
    sanitize: false,
    content: 'A short description<button type="button" class="btn btn-primary mt-2">My Button</button>'
  });
});

2. 修正动态修改Popover内容的错误 #

如果你坚持要动态添加按钮到已初始化的Popover，注意以下两点：

• getElementsByClassName的参数不需要加.，直接写类名
• 不需要转义HTML标签，直接使用原始字符串

修正后的代码：

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl, {
    sanitize: false // 必须先关闭sanitize才能渲染HTML按钮
  });
});

popoverList.forEach(function (popover) {
  // 获取Popover的内容容器，注意类名不要加.
  var contentEl = popover.getTipElement().querySelector('.popover-body');
  if (contentEl) {
    contentEl.innerHTML += '<button type="button" class="btn btn-primary mt-2">My Button</button>';
  }
});

完整HTML示例 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<div class="col-lg-4 mb-3 servicePOP" data-aos="fade-up" tabindex="0" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Title" data-bs-content="A short description">
  <div class="card position-relative">
    <div class="d-block card-icon">
      <img src="images.png" class="card-icon position-absolute start-0 end-0 m-auto rounded-circle mb-5 lazy" alt="Title">
    </div>
    <div class="card-body text-center mt-5 pt-5">
      <a href="#" class="text-decoration-none text-dark">
        <h5 class="card-title">Title</h5>
      </a>
      <p>A short description</p>
      <a href="#" class="btn btn-primary">More Details</a>
    </div>
  </div>
</div>

安全替代方案（可选） #

如果你不想完全关闭sanitize，可以通过allowList配置允许特定标签和属性，兼顾安全性：

return new bootstrap.Popover(popoverTriggerEl, {
  allowList: {
    button: ['type', 'class'],
    ...bootstrap.Popover.Default.allowList // 保留默认允许的标签
  },
  content: 'A short description<button type="button" class="btn btn-primary mt-2">My Button</button>'
});

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