Bootstrap 4 工具提示 - JavaScript

Bootstrap 4 提供了一个用于工具提示（Tooltip）和弹出框（Popover）的 JavaScript 插件，可以很方便地在你的网站上展示提示信息和用户交互内容。在这篇文章中，我们将讨论如何使用 Bootstrap 4 工具提示插件，向你的用户提供更好的交互体验。

准备工作

在使用 Bootstrap 4 工具提示插件之前，需要先引入相关的 CSS 和 JavaScript 文件。这些文件可以从 Bootstrap 官网下载，或通过 CDN 来引入。以下是引入 Bootstrap 4 工具提示插件所需的文件：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

注意：以上引入的 JavaScript 文件中只包含了 jQuery 和 Popper.js 的精简版本，如果你的网站中已经引入了完整版本的 jQuery 和 Popper.js，可以省略这两个文件的引入。

用法

基本用法

使用 Bootstrap 4 工具提示插件的基本用法非常简单，只需要在需要展示工具提示的元素上添加 data-toggle="tooltip" 属性，以及 title 属性来定义要展示的提示文本。以下是一个基本示例：

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="这是一个工具提示">Tooltip</button>

在这个例子中，我们在一个按钮上添加了 data-toggle="tooltip" 和 title 属性，同时还添加了 data-placement="top" 属性来指定工具提示的显示位置为顶部。这样，在用户将鼠标悬停在这个按钮上时，将会展示一个带有“这个是一个工具提示”文本的提示框。

不同的显示位置

Bootstrap 4 工具提示插件支持多种不同的显示位置，可以通过 data-placement 属性来指定要展示在哪个方向上。以下是支持的显示位置：

• top：顶部
• bottom：底部
• left：左侧
• right：右侧

例如，要将工具提示显示在按钮的底部，可以添加 data-placement="bottom" 属性：

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="这是一个工具提示">Tooltip</button>

自定义样式

Bootstrap 4 工具提示插件提供了一些默认的样式，用于设置工具提示提示框的背景、边框等。如果你需要自定义提示框的样式，可以使用 Bootstrap 的自定义样式系统。例如，要将提示框的背景色改为绿色，可以添加以下 CSS：

.tooltip {
  background-color: green;
}

方法和事件

Bootstrap 4 工具提示插件还提供了一些方法和事件，可以让你在需要时控制提示框的显示和隐藏。以下是一些常用的方法和事件：

方法

• .tooltip('show')：显示提示框
• .tooltip('hide')：隐藏提示框
• .tooltip('toggle')：切换提示框的显示状态
• .tooltip('enable')：启用提示框
• .tooltip('disable')：禁用提示框

例如，要在按钮点击时显示提示框，可以添加以下 JavaScript：

$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();

  $('#myButton').click(function(){
    $(this).tooltip('show');
  });
});

在这个例子中，我们首先添加了一个事件监听器，当文档加载完成后，将所有带有 data-toggle="tooltip" 属性的元素初始化为工具提示。然后，我们又添加了一个按钮点击事件监听器，在按钮点击时显示提示框。

事件

• show.bs.tooltip：提示框开始显示时触发
• shown.bs.tooltip：提示框已经显示时触发
• hide.bs.tooltip：提示框开始隐藏时触发
• hidden.bs.tooltip：提示框已经隐藏时触发

例如，要在提示框显示时向控制台输出一些信息，可以添加以下 JavaScript：

$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();

  $('[data-toggle="tooltip"]').on('show.bs.tooltip', function(){
    console.log('Tooltip is about to be shown');
  });
});

在这个例子中，我们添加了一个事件监听器，在提示框显示前输出一些信息到控制台。

总结

通过上述的内容，你现在已经了解了 Bootstrap 4 工具提示插件的基本用法、不同的显示位置、自定义样式以及一些常用的方法和事件。利用 Bootstrap 4 工具提示插件可以为你的网站提供更好的交互体验，帮助用户更好地理解网站的功能和内容。