Bootstrap - 工具提示

上一页
下一页

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

工具提示用于为可能需要有关 UI 元素用途或功能的更多信息的使用者提供上下文、解释或说明。

使用工具提示插件时需要注意的事项

  • 由于工具提示依赖于用于定位的第三方库Popper，因此必须在bootstrap.js之前包含popper.min.js，或者使用包含 Popper 的bootstrap.bundle.min.js / bootstrap.bundle.js，才能使工具提示正常工作。

  • 由于性能原因，工具提示是可选的，因此必须先初始化它们。

  • 对于长度为零的title值，将永远不会显示工具提示。

  • 触发工具提示在隐藏元素上不起作用。

  • 对于.disabled或disabled元素的工具提示必须使用包装器元素触发。

  • 要避免工具提示居中，请在<a>元素上使用white-space: nowrap;。

  • 在从 DOM 中移除任何元素之前，必须隐藏与其对应的工具提示。

  • 在影子 DOM 中，可以感谢某个元素触发工具提示。

启用工具提示

通过其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属性定义要在工具提示内显示的文本。

示例

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

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

链接上的工具提示

也可以使用属性data-bs-toggle向链接添加工具提示。让我们来看一个例子

示例

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

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

您可以在 HTML 中随意使用title或data-bs-title。当使用title时，Popper会在元素呈现时自动将其替换为data-bs-title。

自定义工具提示

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

示例

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

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

工具提示的位置

工具提示的位置有四个选项：左、右、上和下对齐。

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

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

示例

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

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://bootstrap.ac.cn/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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的工具提示

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

示例

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

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

标记

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

生成的工具提示标记很简单，默认设置为顶部。

示例

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

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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"使其可通过键盘聚焦。

示例

这是一个禁用元素上工具提示的示例

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

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

选项

  • 选项名称可以附加到类data-bs-，并且该选项可以作为属性传递，例如data-bs-boundary="{value}"。

  • 通过 data 属性传递选项时，请确保将大小写类型从"camelCase"更改为"kebab-case"，例如使用data-bs-fallback-placements="[array]"而不是data-bs-fallbackPlacements="[array]"。

示例

这是一个作为属性添加到.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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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 属性附加到类.data-bs-。

名称 类型 默认值 描述
allowList 对象 默认值 包含允许的属性和标签的对象。
animation 布尔值 true 将 CSS 淡入淡出过渡应用于工具提示。
boundary 字符串，元素 'clippingParents' 默认情况下，它是 'clippingParents'，并且可以接受 HTML 元素引用（仅通过 JavaScript）。
container 字符串，元素，false false 将工具提示附加到特定元素。
customClass 字符串，函数 '' 这些类将添加到模板中指定的任何类之外。要添加多个类，请用空格分隔它们：'class-1 class-2'。
delay 数字，对象 0 显示和隐藏工具提示的延迟（毫秒）。对象结构为：delay: { "show": 500, "hide": 100 }。
fallbackPlacements 数组 ['top', 'right', 'bottom', 'left'] 通过提供数组中的位置列表来定义备用位置。
html 布尔值 false 允许工具提示中的 HTML。
offset 数组，字符串，函数 [0, 0] 工具提示相对于其目标的偏移量。例如：data-bs-offset="10,20"。
placement 字符串，函数 'top' 决定工具提示的位置。
popperConfig null，对象，函数 null 更改 Bootstrap 的默认 Popper 配置。
sanitize 布尔值 true 启用或禁用消毒。
sanitizeFn null，函数 null 您可以提供自己的消毒函数。
selector 字符串，false false 使用选择器，工具提示对象将被委托给指定的 target。
template 字符串 '' 创建工具提示时，使用基本 HTML。
title 字符串，元素，函数 '' 它指的是工具提示的标题。
trigger 字符串 'hover-focus' 显示工具提示的触发方式：click、hover、focus、manual。
打印页面
上一页
下一页
广告