Bootstrap 简明教程

Bootstrap - Tooltips

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

This chapter will discuss about adding custom Bootstrap tooltips. Tooltip is typically displayed as a small, floating box that appears when the user hovers over or clicks on a specific UI element, such as a button, icon, or hyperlink.

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

Tooltips are used to provide context, explanations, or instructions for users who may need more information about the purpose or functionality of a UI element.

Enable Tooltips

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

Initialize all the tooltips on a page, by their data-bs-toggle attribute

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

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

Add the data-bs-toggle="tooltip" attribute to an element, to create a tooltip.

The data-bs-toggle attribute defines the tooltip.
The title attribute defines the text to be displayed inside the tooltip.

Example

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

You can edit and try running this code using the *Edit & Run *option.

<!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 属性将工具提示添加到链接。我们来看一个示例：

Tooltips can be added to links as well using the attribute data-bs-toggle. Let’s see an example:

Example

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

You can edit and try running this code using the *Edit & Run *option.

<!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" 来自定义该工具提示。我们来看一个示例：

Bootstrap provides a custom class data-bs-custom-class="custom tooltip" to customize the tooltip. Let’s see an example:

Example

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

You can edit and try running this code using the *Edit & Run *option.

<!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 已对齐。

There are four options available for the positioning of the tooltip: left, right, top and bottom aligned.

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

By default, the tooltip will appear on top of the element.

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

The data-bs-placement attribute is used to set the position of the tooltip.

Example

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

You can edit and try running this code using the *Edit & Run *option.

<!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 的工具提示。

The example given below shows a tooltip with custom HTML added.

Example

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

You can edit and try running this code using the *Edit & Run *option.

<!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 。

For a tooltip on any HTML element, the required markup for the tooltip is only a data attribute and title.

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

The markup of a tooltip that is generated is simple and is set to top, be default.

Example

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

You can edit and try running this code using the *Edit & Run *option.

<!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> 。

The users can not focus, hover or click on the elements with disabled attribute, to trigger a tooltip. Thus, in order to trigger a tooltip, use the wrapper <div> or <span>.

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

Use tabindex="0" to make it keyboard-focusable.

Example

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

Here is an example of tooltip on disabled element:

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

You can edit and try running this code using the *Edit & Run *option.

<!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

An option name can be appended to the class data-bs- and that option can be passed as an attribute, such as data-bs-boundary="{value}".
When passing the options via data attributes, make sure to change the case type to "kebab-case" from "camelCase", such as use data-bs-fallback-placements="[array]" instead of data-bs-fallbackPlacements="[array]".

Example

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

Here is an example of options added as an attribute to .data-bs- class:

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

You can edit and try running this code using the *Edit & Run *option.

<!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- 上。

The table given below shows the various options provided by Bootstrap, to be appended to the class .data-bs- as a data attribute.

Name

Type

Default

Description

allowList

object

default value

Object that contains allowed attributes and tags.

animation

boolean

true

A CSS fade transition is applied to the tooltip.

boundary

string, element

'clippingParents'

By default, it’s 'clippingParents' and can accept an HTML Element reference (via JavaScript only).

container

string, element, false

false

Appends the tooltip to a specific element.

customClass

string, function

These classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: 'class-1 class-2'.

delay

number, object

Delay showing and hiding the tooltip (ms). Object structure is: delay: { "show": 500, "hide": 100 }.

fallbackPlacements

array

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

Define fallback placements by providing a list of placements in array.

html

boolean

false

Allow HTML in the tooltip.

offset

array, string, function

[0, 0]

Offset of the tooltip relative to its target. Ex: data-bs-offset="10,20".

placement

string, function

'top'

Decides the position of the tooltip.

popperConfig

null, object, function

null

To change Bootstrap’s default Popper config.

sanitize

boolean

true

Enable or disable the sanitization.

sanitizeFn

null, function

null

You can supply your own sanitize function.

selector

string, false

false

With a selector, tooltip objects will be delegated to the specified targets.

template

string

While creating a tooltip, use the base HTML.

title

string, element, function

It refers to the title of the tooltip.

trigger

string

'hover-focus'

Shows how the tooltip is triggered: click, hover, focus, manual.

Bootstrap 简明教程

Bootstrap - Tooltips

Enable Tooltips

Creating a Tooltip

Example

Tooltips on Links

Example

Custom tooltips

Example

Positioning of a Tooltip

Example

Tooltip with custom HTML

Example

Markup

Example

Tooltip on disabled elements

Example

Options

Example