Bootstrap 弹出框

Bootstrap Popover 插件

Popover 插件

Popover 插件类似于 Tooltip，但可以包含更多内容。它是一个弹出框，当用户点击或悬停在某个元素上时出现。Popovers 依赖于 Popper 库进行定位，该库已包含在 bootstrap.bundle.min.js 中。

Popovers 示例：

<button type="button" class="btn btn-lg btn-danger m-2" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<button type="button" class="btn btn-secondary m-2" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover content">Popover on top</button>

要启用 Popovers，必须使用 JavaScript 进行初始化：

document.addEventListener(‘DOMContentLoaded’, function () { var popoverTriggerList = [].slice.call(document.querySelectorAll(‘[data-bs-toggle=“popover”]’)); var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { return new bootstrap.Popover(popoverTriggerEl); }); });

注意: Popovers 需要 Bootstrap 的 JavaScript (bootstrap.bundle.min.js) 和 Popper。请确保这些文件已包含在您的项目中。如果您单独包含 JavaScript 文件，请确保 popover.js 在 tooltip.js 之后包含（因为 Popover 扩展了 Tooltip），并且 Popper 可用。

如何创建 Popover

要创建 Popover，请向元素添加 data-bs-toggle=“popover” 属性。

使用 title 属性（或 data-bs-title）指定 Popover 的头部文本，使用 data-bs-content 属性指定应显示在 Popover 主体内的文本：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Popover Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
  <a href="#" role="button" class="btn btn-info"
     data-bs-toggle="popover"
     title="Popover Header"
     data-bs-content="Some content inside the popover body. This can be longer and include HTML if needed (ensure data-bs-html='true').">
    Toggle popover
  </a>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  // Initialize all popovers on the page
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
  })
</script>

</body>
</html>

重要: Popovers 必须通过 JavaScript 初始化。上面的代码选择所有带有 data-bs-toggle=“popover” 属性的元素并对其进行初始化。

如果您想在 Popover 内容中包含 HTML，必须设置 data-bs-html=“true”。

定位 Popovers

默认情况下，Popover 会出现在元素的右侧。

使用 data-bs-placement 属性来设置 Popover 的位置：top（上）, bottom（下）, left（左）, 或 right（右）。

<div class="container mt-3">
  <button type="button" class="btn btn-secondary m-1" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
    Popover on top
  </button>
  <button type="button" class="btn btn-secondary m-1" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
    Popover on right
  </button>
  <button type="button" class="btn btn-secondary m-1" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
    Popover on bottom
  </button>
  <button type="button" class="btn btn-secondary m-1" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
    Popover on left
  </button>
</div>
<!-- Remember to initialize popovers with JavaScript -->

提示: 您还可以使用 data-bs-placement=“auto”，这将让 Popper 动态重新定位 Popover。例如，auto left 会尽可能将 Popover 显示在左侧，否则显示在右侧。通常建议使用 data-bs-container=“body” 属性，以避免在更复杂的组件中出现渲染问题。

关闭 Popovers（点击别处隐藏）

默认情况下（触发器：‘click’），当您再次点击触发元素时，Popover 会被切换显示/隐藏。要实现在用户点击 Popover 外部时（在切换显示后）隐藏 Popover，您需要使用 focus 触发器。但这要求触发元素是可聚焦的（例如按钮或带有 tabindex 的链接）。

实现“点击别处隐藏”的一种常见方法是设置 data-bs-trigger=“focus”。当触发元素失去焦点时（例如点击页面其他地方），Popover 就会关闭。

<a tabindex="0" class="btn btn-lg btn-danger" role="button"
   data-bs-toggle="popover"
   data-bs-trigger="focus"
   title="Dismissible popover"
   data-bs-content="And here's some amazing content. It's very engaging. Right?">
  Dismissible popover (click away to dismiss)
</a>
<!-- Remember to initialize popovers with JavaScript -->

悬停触发 (Trigger on Hover)

如果您希望当鼠标指针移到元素上时显示 Popover，移开时隐藏，请使用 data-bs-trigger=“hover” 或 data-bs-trigger=“hover focus” 来实现悬停触发并兼顾键盘可访问性。

<button type="button" class="btn btn-primary"
        data-bs-toggle="popover"
        data-bs-trigger="hover focus"
        title="Popover on Hover"
        data-bs-content="This popover appears on hover or focus.">
  Hover or Focus on me
</button>
<!-- Remember to initialize popovers with JavaScript -->

完整的 Bootstrap Popover 参考

有关所有 Popover 选项、方法和事件的完整参考，以及高级配置（例如使用自定义 HTML 模板或特定的 Popper 配置），请查阅官方的 Bootstrap 5 Popover 文档。

主要选项包括 animation（动画）, container（容器）, delay（延迟）, html（是否支持HTML）, placement（位置）, selector（选择器）, template（模板）, title（标题）, content（内容）, trigger（触发方式）, 和 offset（偏移量）。