<p>Popover 初始化必须等 DOM 就绪且 Bootstrap JS 已加载，需引入 bootstrap.bundle.min.js、在 $(document).ready() 中调用、避免 data-bs-* 与 JS 混用、click 触发需显式设置 trigger、HTML 内容须开启 html: true。</p>
Popover 初始化必须等 DOM 就绪且 Bootstrap JS 已加载
直接在 <script> 标签里调用 $('#mybtn').popover() 却没弹出？大概率是 dom 还没挂载，或 bootstrap.bundle.js（含 popover 依赖的 popper）根本没引入。
实操建议：
- 确保
bootstrap.bundle.min.js（不是bootstrap.min.js）已加载——Popover 依赖 Popper，单独引入bootstrap.min.js会静默失败 - 初始化代码放在
$(document).ready()或DOMContentLoaded回调里，别写在<head>的脚本中 - 检查浏览器控制台是否报错
TypeError: $(...).popover is not a function，这是 JS 未加载或版本不匹配的明确信号
data-bs-* 属性和 JS 初始化不能混用同一元素
既写 data-bs-toggle="popover" 又手动调用 .popover({ title: 'xxx' })，结果标题显示为空、内容不更新——因为 Bootstrap 会优先读取 data-bs-title 和 data-bs-content 属性，JS 配置被忽略。
实操建议：
- 二选一：纯属性驱动（适合静态内容），或纯 JS 初始化（适合动态内容）
- 若用 JS 初始化，务必移除元素上的所有
data-bs-*相关属性，否则行为不可控 - 动态内容推荐 JS 方式：
$('#myBtn').popover({ title: '状态', content: `在线：${user.status}` })
点击触发需显式设置 trigger: 'click'
默认 trigger 是 'hover focus'，鼠标悬停就弹出；但用户想要“点一下才显示”，却只加了 data-bs-toggle="popover"，结果 hover 也触发，体验混乱。
实操建议：
- HTML 方式：加
data-bs-trigger="click"，同时删掉data-bs-toggle（它会被自动推导，但显式声明更安全） - JS 方式：必须传入
{ trigger: 'click' }，否则仍按默认 hover 行为执行 - 移动端注意：
click触发在 iOS Safari 上可能有 300ms 延迟，如需即时响应，考虑监听touchstart并手动.popover('show')
内容含 HTML 时必须设 html: true
想在 Popover 里放链接或换行，写了 content: '<br><a href="#">详情</a>'，结果只显示纯文本，<br> 被转义成字面量。
实操建议：
-
html: true是开关，不设就是纯文本渲染，设了才解析 HTML - 开启后务必自行过滤用户输入，避免 XSS —— 如果 content 来自用户，先用 DOMPurify 处理再传入
- 示例：
$('#info').popover({ html: true, content: '<strong>警告</strong>：操作不可逆' })
Popovers 的行为高度依赖初始化时机、属性与 JS 配置的互斥关系，以及 html 开关这种看似小却决定内容是否生效的细节。漏掉任意一个，都容易卡在“明明照着文档写，就是不弹”。
