Bootstrap 简明教程

Bootstrap - Popovers

本章将讨论 Bootstrap 中的提示框。提示框通常含有触发元素的其他信息、内容或动作。

提示框可能会包含文本、图片、链接、按钮或其他内容，具体取决于其目的和内容。Bootstrap 提供了内置的提示框组件，可以轻松集成到网络应用程序中。

Enable Popovers

按它们的 data-bs-toggle 属性初始化页面中的所有提示框。

  const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
  const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

向元素添加 data-bs-toggle="popover" 属性，以创建一个提示框。

data-bs-toggle 属性定义了提示框。
title 属性定义了提示框的标题。
data-content 属性定义了在相应提示框中显示的内容。

Example

让我们看看创建一个提示框的示例：

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Popover</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Bootstrap creation</h4><br><br>
    <button type="button" class="btn btn-primary"
      data-bs-toggle="popover" data-bs-placement="top"
      data-bs-title="Popover"
      data-bs-content="It is a new popover.">
      Click to view popover
    </button>
    <script>
      const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
      const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    </script>
  </body>
</html>

有四个选项可用于提示框的位置： left, right, top and bottom 对齐。

默认情况下，提示框将显示在元素的右侧。

data-bs-placement 属性用于设置提示框的位置。

Example

让我们看看设置提示框位置的示例：

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Popovers</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Positioning of Popover</h4>
    <br><br><br>
    <button type="button" class="btn btn-secondary" 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" 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" 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" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
      Popover on left
    </button>
    <script>
      const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
      const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    </script>
  </body>
</html>

Custom popovers

可以自定义外观使用自定义类 data-bs-custom-class="custom-popover" 。

Example

让我们看看创建一个自定义提示框的示例：

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!DOCTYPE html>
<html lang="en">
  <head&>
    <title>Bootstrap - Popovers</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Custom Popover</h4><br><br>
    <!-- Define custom container -->
    <button type="button" class="btn btn-primary"
        data-bs-toggle="popover" data-bs-placement="top"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="It is a custom popover.">
      Custom popover
    </button>
    <script>
      const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
      const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    </script>
  </body>
</html>

提示框在再次单击同一元素时会关闭，这是默认设置。但可以使用属性 data-bs-trigger="focus" ，这样单击元素外部时会关闭提示框。

Example

让我们看看可隐藏提示框的示例：

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Dismissible Popover</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
      <div class="container mt-3">
      <h4>Dismissed on next click - Popover</h4><br>
      <a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Click anywhere in the document to close this popover">Click me</a>
      </div>
      <script>
       const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
       const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
      </script>
  </body>
</html>

当鼠标指针移到元素上方时，你希望一个提示框显示在悬停时，使用 data-bs-trigger="hover" 属性。

Example

我们来看看一个悬停弹出框的示例：

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Popover on hover</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
      <div class="container mt-3">
      <h4>Hoverable Popover</h4><br>
      <a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Popover text">Hover over me</a>
      </div>
      <script>
       const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
       const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
      </script>
  </body>
</html>

对于禁用元素上的弹出框，你可以选择 data-bs-trigger="hover focus" ，这样弹出框会作为立即的视觉反馈形式出现在你的用户面前，因为他们可能不会点击禁用元素。

Example

我们再来看看禁用元素上弹出框的示例：

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Popovers</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Popover on Disabled Element</h4><br>
    <span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
      <button class="btn btn-primary" type="button" disabled>Disabled button</button>
    </span>
    <script>
      const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
      const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    </script>
  </body>
</html>

Options

可以将选项名称附加到类 data-bs- 上，并且该选项可以作为属性传递，例如 data-bs-boundary="{value}" 。
通过数据属性传递选项时，请务必将大小写类型从 "camelCase" 更改为 "kebab-case"，例如使用 data-bs-fallback-placements="[array]" 而不是 data-bs-fallbackPlacements="[array]" 。

Example

以下是一个作为属性添加到 .data-bs- 类的选项示例：

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!DOCTYPE html>
<html lang="en">
  <head&>
      <title>Bootstrap Popovers - Options</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
      <h4>Popover options</h4><br>
      <button type="button" class="btn btn-lg btn-success" data-bs-toggle="popover"  data-bs-title ="Title added through options and that overrides the title provided" title="Popover description" data-content="Popover desc">Click Me to view</button>
      <br><br>
      <script>
      const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
      const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    </script>
  </body>
</html>

下面给出的表格显示了 Bootstrap 提供的各种选项，可作为数据属性附加到类 .data-bs- 上。

Name

Type

Default

Description

allowList

object

default value

包含允许的属性和标记的对象。

animation

boolean

true

一个 CSS 渐隐变换应用到了弹出框。

boundary

string, element

'clippingParents'

默认情况下，它是 'clippingParents'，并且可以接受 HTML 元素引用（仅通过 JavaScript）。

container

string, element, false

false

把弹出框追加到一个指定元素。

customClass

string, function

这些类将添加到模板中指定的任何类中。要添加多个类，请用空格分隔它们：'class-1 class-2'。

delay

number, object

延迟显示和隐藏弹出框（毫秒）。对象结构为：delay: { "show": 500, "hide": 100 }。

fallbackPlacements

array

['top', 'right', 'bottom', 'left']

通过在数组中提供放置位置列表，定义备用放置位置。

html

boolean

false

允许弹出框中出现 HTML。

offset

array, string, function

[0, 0]

弹出框相对于目标的偏移量。例如：data-bs-offset="10,20"。

placement

string, function

'top'

决定弹出框的位置。

popperConfig

null, object, function

null

要更改 Bootstrap 的默认 Popper 配置。

sanitize

boolean

true

启用或禁用清理。

sanitizeFn

null, function

null

您可以提供自己的清理函数。

selector

string, false

false

通过一个选择器，弹出框对象将被委派给指定的 targets。

template

string

创建弹出框时使用基本 HTML。

title

string, element, function

它指的是弹出框的标题。

trigger

string

'hover-focus'

显示弹出框的触发方式：点击、悬停、聚焦、手动。

Bootstrap 简明教程

Bootstrap - Popovers

Enable Popovers

Creating a Popover

Example

Positioning of a Popover

Example

Custom popovers

Example

Dismissible Popover

Example

Hovering of a Popover

Example

Popover on disabled elements

Example

Options

Example