Bootstrap 的弹出框（Popover）插件是一个用于创建带有额外信息的悬浮窗口的工具。它通常用于在用户将鼠标悬停在某个元素上时显示更多信息。弹出框可以包含任意的内容，比如文本、HTML 或者两者的混合。
如何使用 Popover 插件
通过 Data Attributes
要通过 Data API 使用 Popover，你需要在 HTML 元素上添加 data-toggle="popover" 属性。你还可以设置 title 属性作为弹出框的标题，以及 data-content 属性作为弹出框的内容。
<a href="#" data-toggle="popover" title="Popover title" data-content="Some content inside the popover">
Hover over me
</a>
通过 JavaScript
你也可以通过 JavaScript 手动触发 Popover。首先，确保你的页面已经加载了 jQuery 和 Bootstrap 的 JavaScript 文件。然后，使用以下代码来初始化 Popover：
$('#identifier').popover(options)
其中 options 是可选的，可以用来自定义 Popover 的行为，比如 placement（弹出框的位置）、trigger（触发方式）、content（内容）等。
启用所有 Popover
如果你的页面上有多个 Popover，你可以使用以下脚本来启用它们：
$(function () {
$("[data-toggle='popover']").popover();
});
这段代码会在文档加载完成后，自动初始化所有带有 data-toggle="popover" 属性的元素。
代码示例
以下是一个完整的示例，展示了如何在不同位置显示 Popover：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popover Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container" style="padding: 100px 50px 10px;">
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="左侧的 Popover 中的一些内容">
左侧的 Popover
</button>
<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="top" data-content="顶部的 Popover 中的一些内容">
顶部的 Popover
</button>
<button type="button" class="btn btn-success" data-container="body" data-toggle="popover" data-placement="bottom" data-content="底部的 Popover 中的一些内容">
底部的 Popover
</button>
<button type="button" class="btn btn-warning" data-container="body" data-toggle="popover" data-placement="right" data-content="右侧的 Popover 中的一些内容">
右侧的 Popover
</button>
</div>
<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- 引入Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script>
$(function () {
$("[data-toggle='popover']").popover();
});
</script>
</body>
</html>
