从入门到精通Bootstrap5第27课：掌握弹出提示和工具提示组件的使用方法

前端

2023-10-13 18:38:27

Bootstrap 5弹出提示和工具提示组件用法解析

在学习这节课之前，您应该具备Bootstrap 5的基础知识，并了解HTML/CSS的一些基本语法。如果您还没有学习过Bootstrap 5，建议您先学习前面26节的内容，以便更好地理解本节的内容。

1、组件概述

弹出提示（Popovers）和工具提示（Tooltips）都是Bootstrap 5提供的组件，用于在用户与网页交互时显示额外的信息。

弹出提示是一种浮动的盒子，当用户将鼠标悬停在某个元素上时出现，通常用于显示详细的解释或说明。
工具提示是一种小的弹出提示框，当用户将鼠标悬停在某个元素上时出现，通常用于显示简短的说明或提示信息。

2、组件用法

弹出提示（Popovers）

<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-content="这是弹出提示的内容">
  显示弹出提示
</button>

<script>
  var popover = new bootstrap.Popover(document.querySelector('.btn-primary'))
</script>

在需要显示弹出提示的元素上添加data-bs-toggle="popover"属性和data-bs-content="弹出提示的内容"属性。
使用JavaScript实例化一个Popover对象，并将需要显示弹出提示的元素作为参数传递给构造函数。

工具提示（Tooltips）

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-title="这是工具提示的标题">
  显示工具提示
</button>

<script>
  var tooltip = new bootstrap.Tooltip(document.querySelector('.btn-primary'))
</script>

在需要显示工具提示的元素上添加data-bs-toggle="tooltip"属性和data-bs-title="工具提示的标题"属性。
使用JavaScript实例化一个Tooltip对象，并将需要显示工具提示的元素作为参数传递给构造函数。

3、组件配置

弹出提示和工具提示组件都提供了丰富的配置选项，允许您自定义组件的样式、位置、触发方式等。您可以在Bootstrap 5的官方文档中找到详细的配置选项说明。

4、实例演示

以下示例演示了如何使用弹出提示和工具提示组件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
  <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>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-content="这是弹出提示的内容">
          显示弹出提示
        </button>
      </div>
      <div class="col-md-6">
        <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-title="这是工具提示的标题">
          显示工具提示
        </button>
      </div>
    </div>
  </div>

  <script>
    var popover = new bootstrap.Popover(document.querySelector('.btn-primary'))
    var tooltip = new bootstrap.Tooltip(document.querySelector('.btn-primary'))
  </script>
</body>
</html>