在 Bootstrap 5 中，若需通过 JavaScript 动态设置 popover 的 data-bs-content 并确保自定义 HTML（如 标签）正确渲染，必须在初始化 Popover 实例前修改 DOM 属性，否则初始化时将读取旧值导致内容不生效。
在 bootstrap 5 中，若需通过 javascript 动态设置 popover 的 `data-bs-content` 并确保自定义 html（如 `
` 标签）正确渲染，必须在初始化 popover 实例前修改 dom 属性，否则初始化时将读取旧值导致内容不生效。
Bootstrap 5 的 Popover 组件在实例化（即 new bootstrap.Popover(...)）时，会一次性读取当前元素的 data-bs-content 属性值并缓存用于后续显示。这意味着：如果你先创建 Popover 实例，再用 setAttribute() 修改 data-bs-content，Popover 对象并不会自动感知该变更——它仍会显示初始化时读取的原始内容。
✅ 正确做法是：先更新 DOM 属性，再初始化 Popover。以下是推荐的执行顺序：
// ✅ 第一步：动态设置 data-bs-content（支持 HTML）
document.getElementById("popcart").setAttribute(
'data-bs-content',
'<h5 class="mb-2">Cart for your items in my shopping cart</h5><p class="mb-0">Total: <strong id="cart-total">0</strong> items</p>'
);
// ✅ 第二步：获取触发器元素并初始化所有 Popover（含刚更新的元素）
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
html: true, // 必须设为 true 才能解析 HTML 字符串
trigger: 'click' // 可选：显式指定触发方式
});
});? 关键注意事项：
- html: true 是必需配置项，否则
等标签会被当作纯文本转义显示；
- 不要依赖 setAttribute() 后调用 popover.update() 或重新初始化——Bootstrap 5 Popover 实例不监听 DOM 属性变化，重置需手动销毁并重建（见进阶方案）；
- 若需运行时动态刷新内容（如购物车数量变化），建议使用 popover.setContent() 方法（Bootstrap 5.2+）或手动销毁重建：
// 进阶：运行时更新已初始化的 Popover（推荐用于频繁变更场景）
const popcartEl = document.getElementById("popcart");
const popoverInstance = bootstrap.Popover.getInstance(popcartEl);
if (popoverInstance) {
popoverInstance.setContent({
'.popover-header': 'Your cart',
'.popover-body': `<h5>Updated cart content</h5><p>Items: <span id="cart">${getCartCount()}</span></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>`
});
}? 总结：Popover 的 data-bs-content 是初始化时的“快照”，而非实时绑定。始终遵循「先改属性，后初始化」原则，并配合 html: true，即可可靠渲染富文本内容。
