升级到Bootstrap 4.6.0后带HTML内容的popover功能失效问题求助

修复方案 #

1. 兼容Bootstrap 4的激活类名 #

Bootstrap 3中popover激活状态的类是.in，4.x版本已改为.show，你全局点击关闭的判断逻辑错误，会触发刚弹出的popover被立刻隐藏。
修改全局点击事件的判断代码：

// 把原来的 !$(e.target).parents().is('.popover.in') 替换为
!$(e.target).parents().is('.popover.show')

2. 修正动态更新popover内容的写法 #

popover初始化后会缓存data-content的取值，直接修改元素属性attr('data-content')无法更新内部缓存，会导致弹出内容不生效。
修改load回调里的内容更新代码：

// 替换原来的 $("#btnUploadCOI").attr('data-content', response);
$("#btnUploadCOI").data('content', response);
// 可选：主动刷新popover实例内容
$("#btnUploadCOI").popover('setContent');

3. 解决第三方插件冲突 #

你引入的jquery.tooltipster.js、jQuery UI的tooltip组件，都会和Bootstrap的popover抢占data-toggle相关的事件绑定，导致Bootstrap popover初始化失效。
解决方案二选一：

• 将bootstrap.min.js的引入顺序调整到所有tooltip类插件之后，覆盖冲突的事件绑定
• 卸载不需要的冗余tooltip类插件

4. 移除禁用属性避免交互拦截 #

你在点击按钮后立刻设置disabled属性，Bootstrap会拦截禁用元素的交互事件，导致后续popover显示逻辑被阻断。建议移除不必要的disabled属性设置，或改用自定义CSS类控制禁用样式。 #

5. 关闭HTML内容过滤（按需使用） #

Bootstrap 4.x默认开启HTML内容安全过滤，若你接口返回的内容包含script、iframe等默认被禁止的标签，会被过滤为空导致popover无内容不显示。确认返回内容安全的前提下，初始化时关闭过滤：

$(function () {
  $('[data-toggle="popover"]').popover({
    html: true,
    sanitize: false
  });
})

6. 检查Popper.js版本兼容性 #

Bootstrap 4.6.x仅支持Popper.js 1.x版本，若你引入的是Popper.js 2.x版本，会直接导致popover完全失效。请检查popper.min.js版本，若为2.x请更换为1.16.x等1.x系列版本。

内容的提问来源于stack exchange，提问作者HAREESH PONNAM