Bootstrap 的 popover 必须手动初始化，依赖 Tooltip 和 Popper.js，需在 DOM 加载后调用 popover() 方法；Bootstrap 4 需 jQuery，5+ 不需要；HTML 用 data-bs-toggle="popover" 标记，JS 初始化并支持 placement、trigger 等配置。
Bootstrap 的 popover（弹出框）需要手动初始化，不能仅靠 HTML 属性自动生效。它依赖于 Tooltip 组件，且必须在 DOM 加载完成后调用 popover() 方法，否则点击无反应。
1. 引入必要资源
确保按顺序加载 Bootstrap 的 CSS、jQuery（v3.6 或兼容版本）、Popper.js（v2.x）和 Bootstrap JS。Bootstrap 5+ 已移除 jQuery 依赖，但若使用 Bootstrap 4，jQuery 是必需的。
- Bootstrap CSS（含 popover 样式）
- jQuery（仅 Bootstrap 4）
- Popper.js（Bootstrap 4/5 均需，用于定位）
- Bootstrap JS（含 tooltip + popover 模块）
2. 编写基础 HTML 结构
用 data-bs-toggle="popover"（Bootstrap 5）或 data-toggle="popover"（Bootstrap 4）标记触发元素，并通过 data-bs-title 和 data-bs-content 设置标题与内容。支持 HTML 内容需加 data-bs-html="true"。
示例（Bootstrap 5）：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<button type="button" class="btn btn-primary"
data-bs-toggle="popover"
data-bs-title="提示标题"
data-bs-content="这是弹出框的正文内容。"
data-bs-html="true">
点击显示弹出框
</button>
3. 初始化 Popover（关键步骤）
Popover 不会自动启用，必须显式初始化。推荐在 DOMContentLoaded 后执行：
document.addEventListener('DOMContentLoaded', function () {
// 初始化所有 popover 元素
const popoverTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="popover"]')
);
popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
});
也可针对单个元素初始化：
const myBtn = document.getElementById('myBtn');
new bootstrap.Popover(myBtn, {
title: '自定义标题',
content: '动态传入的内容',
placement: 'top',
trigger: 'click'
});
4. 常用配置与交互控制
可通过 data 属性或 JS 参数控制行为：
-
触发方式：
trigger="click"（默认）、"hover"、"focus"或"manual" -
出现位置：
placement="top"/"right"/"bottom"/"left" -
关闭控制：点击外部自动关闭；手动关闭可用
popover.hide()或popover.dispose() -
延迟显示：用
delay="{show: 0, hide: 100}"防止误触
注意：hover 触发时建议同时设置 trigger="hover focus"，兼顾键盘焦点访问。
