Bootstrap 工具提示

Bootstrap 工具提示插件

工具提示插件

工具提示 (Tooltip) 插件允许你在用户悬停、聚焦或点击元素时显示一个包含额外信息的小弹窗。它依赖于 Popper.js，Popper.js 已经包含在 Bootstrap 的 bootstrap.bundle.min.js 文件中。

将鼠标悬停在此按钮上以查看工具提示！ 将鼠标悬停在此链接上以查看工具提示！

// 香草 (原生) JavaScript 初始化所有工具提示 document.addEventListener(‘DOMContentLoaded’, function () { const tooltipTriggerList = document.querySelectorAll(‘[data-bs-toggle=“tooltip”]’); const tooltipList = […tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)); });

	提示：工具提示需要通过 JavaScript 进行初始化。请确保你包含了 bootstrap.bundle.min.js 或单独的 bootstrap.min.js 和 Popper.js，然后按照示例所示进行初始化。

如何创建工具提示

要创建一个工具提示，给元素添加 data-bs-toggle="tooltip" 属性 (attribute)。

使用 title 属性（或者对于 HTML 内容使用 data-bs-title）来指定应在工具提示中显示的文本：

<!DOCTYPE html>
<html lang="en">
<head>
  <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/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-3">
    <button type="button" class="btn btn-secondary"
            data-bs-toggle="tooltip" data-bs-placement="top"
            title="This is a tooltip on a button!">
      Hover over me (Button)
    </button>

    <a href="#" class="ms-3"
       data-bs-toggle="tooltip" data-bs-placement="bottom"
       title="Tooltip on a link!">
      Hover over me (Link)
    </a>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    // 初始化页面上的所有工具提示
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
  </script>
</body>
</html>

重要提示：工具提示必须通过 JavaScript 进行初始化。上面的代码片段展示了如何选择所有带有 data-bs-toggle="tooltip" 属性的元素并初始化它们。

初始化脚本应放在 Bootstrap JS 包文件的后面。

工具提示的定位

默认情况下，工具提示将出现在元素的顶部。你可以使用 data-bs-placement 属性来更改此位置。

data-bs-placement 属性接受的值有：top（顶部）、bottom（底部）、left（左侧）、right（右侧）和 auto（自动）。

<!DOCTYPE html>
<html lang="en">
<body>
  <div class="container mt-3">
    <button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Top</button>
    <button type="button" class="btn btn-info ms-2" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Bottom</button>
    <button type="button" class="btn btn-info ms-2" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Left</button>
    <button type="button" class="btn btn-info ms-2" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Right</button>
  </div>

  <!-- 确保已包含 Bootstrap JS 和工具提示初始化脚本 -->
</body>
</html>
<!-- 别忘了用 JavaScript 初始化这些工具提示！ -->
<script>
  const exampleTooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"][data-bs-placement]'); // 如果需要，可以使用更具体的选择器
  const exampleTooltipList = [...exampleTooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
</script>

	提示：当 data-bs-placement 设置为 auto 时，工具提示会动态调整方向。例如，auto left 在可能的情况下会显示在左侧，否则显示在右侧。

完整的 Bootstrap 工具提示参考资料

有关工具提示的所有选项、方法和事件的完整列表，请参阅 Bootstrap 5 官方关于工具提示的文档。