本文介绍在 bootstrap 5 中实现“点击触发弹出框 + 点击外部自动隐藏”的标准解决方案，通过正确配置 `data-bs-trigger="focus"` 和 `tabindex="0"`，无需额外 javascript 即可获得原生、稳定、无障碍友好的关闭行为。
Bootstrap 5 的 popover 组件默认不支持「点击触发 + 点击外部关闭」的组合行为——当你使用 data-bs-trigger="click" 时，Popover 仅响应显式点击触发元素，但不会监听 document 级别的失焦事件，因此无法自动关闭。手动编写 $(document).on('click', ...) 监听逻辑不仅冗余，还容易因事件冒泡、DOM 动态加载或多个 popover 共存而失效（正如你遇到的问题）。
✅ 正确做法是：改用 data-bs-trigger="focus" 并为触发元素添加 tabindex="0"。这将使 popover 转变为「焦点驱动模式」，此时：
- 点击图标 → 获取焦点 → Popover 显示；
- 点击 popover 内容或任意外部区域 → 触发元素失去焦点 → Popover 自动隐藏；
- 同时支持键盘操作（Tab 切换 + Esc 关闭），符合 WCAG 无障碍标准。
以下是修正后的完整 HTML 示例（服务端 Blade 模板语法兼容）：
<i
class="bi bi-question-circle text-primary float-right"
tabindex="0"
data-bs-toggle="popover"
data-bs-content="{{ $accountTypeQuestionMark[$value] ?? '' }}"
data-bs-trigger="focus"
data-bs-html="true"
aria-label="关于账户类型的帮助信息"
>
<!-- 可选：添加可见文本提升可访问性 -->
</i>⚠️ 注意事项：tabindex="0" 是关键：它使 标签成为可聚焦元素，否则 focus 触发器无效；不要移除 data-bs-html="true"（若内容含 HTML 链接），否则 URL 将被转义显示；请确保已引入 Bootstrap 5.3+ 官方 bundle（含 Popover 依赖的 Tooltip），你的 CDN 地址正确（推荐使用 https://www.php.cn/link/ec01a34f7fc3b03448cc52f2a89d52e8）；初始化脚本保持简洁，无需修改——Bootstrap 会自动处理 focus/blur 生命周期：
<script src="https://www.php.cn/link/ec01a34f7fc3b03448cc52f2a89d52e8"></script>
<script>
// 初始化所有 popover（无需额外代码）
const popoverTriggerList = [...document.querySelectorAll('[data-bs-toggle="popover"]')];
popoverTriggerList.map(el => new bootstrap.Popover(el));
</script>? 进阶提示：如需支持「点击图标显示，再次点击收起」（toggle 行为），可保留 data-bs-trigger="click"，但必须配合自定义事件监听 + popover('toggle')，此时推荐使用事件委托与状态管理，而非简单 hide()。不过对于绝大多数帮助类弹出场景，focus 模式更轻量、更健壮、更符合用户预期。
