bootstrap 5 popover 默认触发方式为 hover focus，需显式设置 data-bs-trigger="click" 或 js 中传入 { trigger: 'click' }；移动端建议用 touchstart + manual 模式，并注意 data 属性优先级高于 js 配置。
data-bs-trigger="click" 必须显式声明，否则默认 hover
很多人加了 data-bs-toggle="popover" 就以为点一下才弹，结果鼠标一划过就出来了。这是因为 Bootstrap 5 默认 trigger 是 'hover focus'，不是 'click'。不写 data-bs-trigger，它就按默认来。
实操建议：
- HTML 方式：必须同时写
data-bs-toggle="popover"和data-bs-trigger="click"，缺一不可 - JS 初始化方式：必须传入
{ trigger: 'click' }，光写$().popover()不生效 - 移动端注意：
click在 iOS Safari 有 300ms 延迟；如需即时响应，改用touchstart事件 +.popover('show')
focus 触发适合键盘操作，但要加 tabindex="0"
想让 Popover 支持键盘 Tab 进入、按 Enter 显示、点击外部或失焦自动收起？得用 focus 模式。但它有个硬性前提：触发元素必须能获得焦点。
常见错误是给 <div> 或 <code><span></span> 直接加 data-bs-trigger="focus"，结果毫无反应——因为它们默认不可聚焦。
实操建议：
- 给触发元素加上
tabindex="0"（例如<button tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus"></button>） - 确保没同时设
trigger: 'click'或混用data-bs-trigger和 JS 配置 - 不用额外写监听逻辑：Bootstrap 内部已通过
focusin/focusout自动控制显示/隐藏
混用 data 属性和 JS 初始化会导致内容为空
比如在按钮上写了 data-bs-title="加载中"，又用 JS 调用 $().popover({ title: '完成' })，结果标题还是“加载中”——甚至变成空字符串。
这是因为 Bootstrap 5 会优先从 data-bs-* 属性读取配置，JS 传入的选项会被忽略，除非你把对应属性全删干净。
实操建议：
- 静态内容：只用
data-bs-title/data-bs-content，别碰 JS 初始化 - 动态内容：JS 初始化时，务必移除元素上的所有
data-bs-title、data-bs-content、data-bs-html等相关属性 - 检查控制台是否报
TypeError: $().popover is not a function，这是 JS 未加载或版本错配的明确信号
移动端 click 触发失效？试试 touchstart + manual 模式
在 iOS Safari 上，单纯靠 trigger: 'click' 可能完全不响应，尤其当触发元素是 <div> 或被 <code>transform 包裹时。这不是 bug，是浏览器对非可点击元素的 click 事件拦截策略。
实操建议：
- 改用
trigger: 'manual'初始化，然后手动绑定touchstart（不是click） - 代码示例：
const el = document.getElementById('myBtn');<br>const popover = new bootstrap.Popover(el, { trigger: 'manual', html: true });<br>el.addEventListener('touchstart', e => {<br> e.preventDefault();<br> popover.show();<br>}); - 记得加
e.preventDefault()，否则可能触发双击缩放或页面滚动
overflow: hidden）、父级定位（transform）或元素本身语义（<div> 缺少 <code>tabindex）上，而不是 Popover 配置本身。
