Bootstrap 简明教程

Bootstrap - Tooltips

本章将讨论如何添加自定义 Bootstrap 工具提示。工具提示通常显示为一个小浮动框，它会在用户将光标悬停在特定 UI 元素（如按钮、图标或超链接）上或单击该元素时出现。

工具提示用于为可能需要了解 UI 元素的用途或功能的用户的提供上下文、解释或指示。

Enable Tooltips

可以通过其 data-bs-toggle 属性初始化页面上的所有工具提示。

  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
  const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

将 data-bs-toggle="tooltip" 属性添加到元素中以创建一个工具提示。

data-bs-toggle 属性定义了工具提示。
title 属性定义在工具提示中显示的文本。

Example

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltips</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>Bootstrap tooltip creation</h4>
      <button type="button" class="btn btn-lg btn-success" data-bs-toggle="tooltip" title="Tooltip description" data-content="Tooltip desc">View tooltip</button>

      <script>
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
      </script>
  </body>
</html>

Tooltips on Links

还可以通过使用 data-bs-toggle 属性将工具提示添加到链接。我们来看一个示例：

Example

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltip</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>Tooltip on link</h4>
    <p class="muted">The  <a href="#" data-bs-toggle="tooltip" data-bs-title="Sample Tooltip">tooltip</a> is used for displaying some extra information about any content. This can be added to a <a href="#" data-bs-toggle="tooltip" data-bs-title="Second tooltip">link</a>.</p>
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

Custom tooltips

Bootstrap 提供了一个自定义类 data-bs-custom-class="custom tooltip" 来自定义该工具提示。我们来看一个示例：

Example

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltip</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 Tooltip</h4>
    <button type="button" class="btn btn-primary"
          data-bs-toggle="tooltip" data-bs-placement="right"
          data-bs-custom-class="custom-tooltip"
          data-bs-title="Tooltip is created as custom tooltip.">
          Custom tooltip
  </button>
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

共有四个用于放置工具提示的选项： left, right, top and bottom 已对齐。

默认情况下，工具提示将出现在元素的顶部。

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

Example

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Tooltip</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 class="p-3 m-0 border-0 bd-example tooltip-demo">
    <h4>Tooltip example - Position</h4>
    <button type="button"   class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top"    data-bs-title="Top Tooltip">
    Top Tooltip
    </button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right"  data-bs-title="Right Tooltip">
    Right Tooltip
    </button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Bottom Tooltip">
    Bottom Tooltip
    </button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left"   data-bs-title="Left Tooltip">
    Left Tooltip
    </button>
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

下面给出的示例显示了一个添加了自定义 HTML 的工具提示。

Example

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltips</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>Bootstrap tooltip creation with HTML</h4>

    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
      Tooltip with HTML
    </button>
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

Markup

对于任何 HTML 元素上的工具提示，该工具提示所需标记仅为一个 data 属性和 title 。

所生成的工具提示的标记是简单的，并且默认情况下被设置为顶部。

Example

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltips</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>Bootstrap tooltip markup</h4>

    <!-- HTML to write -->
    <a href="#" data-bs-toggle="tooltip" title="Markup for a tooltip!">Hover over me for markup</a>
    <!-- Generated markup by the plugin -->
    <div class="tooltip bs-tooltip-top" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">
        Markup for a tooltip
    </div>
    </div>
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

用户不能聚焦、悬停或单击带有 disabled 属性的元素来触发工具提示。因此，为了触发工具提示，请使用包装器 <div> 或 <span> 。

使用 tabindex="0" 使其可通过键盘聚焦。

Example

以下是一个针对已禁用元素的工具提示示例：

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltips</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>Tooltip on Disabled Element</h4>
    <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Tooltip Disabled">
      <button class="btn btn-secondary" type="button" disabled>Button Disabled</button>
    </span>
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </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 Tooltips - 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>Tooltip options</h4>
    <button type="button" class="btn btn-lg btn-success" data-bs-toggle="tooltip"  data-bs-title ="Title added through options and that overrides the title provided" title="Tooltip description" data-content="Tooltip desc">View tooltip</button>

    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

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

Name

Type

Default

Description

allowList

object

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

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

0

延迟显示和隐藏工具提示（毫秒）。对象结构是：延迟：{“显示”：500，“隐藏”：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

使用选择器，工具提示对象将委派给指定的目标。

template

string

''

在创建工具提示时，使用基本 HTML。

title

string, element, function

''

它指的是工具提示的标题。

trigger

string

'hover-focus'

显示工具提示的触发方式：点击、悬停、焦点、手动。