Bootstrap 5 Popover 参数需严格区分 data 属性与 JS 传参优先级：data-bs-* 属性优先于 JS 配置，混用会导致 JS 设置被忽略；动态内容须纯 JS 初始化并调用 setContent/update；关键参数 trigger 和 html 必须显式设置，container 推荐设为 'body' 避免裁剪，html: true 时需防 XSS。
Bootstrap 5 的 Popover 参数不能靠猜，必须明确区分 data 属性和 JS 对象传参的优先级，否则配置会静默失效。
data-bs-* 属性和 JavaScript 初始化别混用
同一元素上同时写 data-bs-toggle="popover" 和手动调用 new bootstrap.Popover(el, { title: 'xxx' })，JS 里的 title 会被忽略——Bootstrap 优先读取 data-bs-title 属性值。
- 纯静态内容：只用 HTML 属性，删掉所有 JS 初始化代码
- 动态内容（比如从 API 拿数据）：移除元素上的
data-bs-title、data-bs-content等属性，只用 JS 初始化并传参 - 常见错误现象：
title显示为空、content始终是旧值、placement不生效
trigger 和 html 是最容易漏设的关键参数
默认 trigger 是 'hover focus'，不是 'click'；默认 html 是 false，含标签的内容会被转义成纯文本。
- 要实现“点一下才弹出”，必须显式设置
trigger: 'click'（JS 方式）或data-bs-trigger="click"（HTML 方式） - 要在弹出框里放
<strong></strong>、<a></a>或换行，必须设html: true，否则内容原样输出为字符串 - 开启
html: true后，若content来自用户输入，务必先用DOMPurify.sanitize()过滤，否则存在 XSS 风险
container 和 placement 组合决定是否被裁剪或错位
Popover 默认插入到触发元素的 parentNode 下，一旦父容器有 overflow: hidden、transform 或 position: relative，弹出框就会被遮挡或定位偏移。
- 通用解法：初始化时加
container: 'body'，或 HTML 中写data-bs-container="body" -
placement只是“倾向方向”，不是绝对位置。比如设了'bottom'，但按钮在页面最底部，Popper.js 会自动 fallback 到'top'，这是正常行为 - 不要用
data-bs-placement="auto bottom"——Bootstrap 5 不支持组合值，整个属性会被浏览器忽略
动态更新内容必须调用 setContent 和 update
初始化后想改标题或正文，不能直接改 DOM，也不能只改 data-bs-content 属性——那些只在初始化时读取一次。
- 先获取实例：
const popover = bootstrap.Popover.getInstance('#my-btn') - 再更新内容：
popover.setContent({ '.popover-header': '新标题', '.popover-body': '新内容' }) - 如果内容变化导致尺寸变动（比如异步加载完长文本），必须紧接着调用
popover.update()，否则箭头和位置可能指向错误坐标
真正麻烦的不是参数多，而是有些参数（比如 container）一旦漏设，问题表现为“弹出框不显示”或“显示位置怪异”，根本看不出和参数有关；还有些参数（比如 html）不设就永远达不到预期效果，但控制台也不报错。
