Bootstrap 工具提示 - 单击另一个工具提示时隐藏

Java

使用Bootstrap工具提示可以为网页上的元素添加鼠标悬停提示信息，提升用户体验。而通过添加一些自定义的JavaScript代码，我们还可以实现在单击另一个工具提示时隐藏当前的工具提示。本文将介绍如何使用Bootstrap工具提示以及如何实现这一隐藏功能。

首先，我们需要在网页中引入Bootstrap的CSS和JavaScript文件。可以通过CDN加速来引入这些文件，也可以下载到本地然后引用。以下是引入Bootstrap的示例代码：

html
<head>
  <!-- 引入Bootstrap的CSS文件 -->
  <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://cdn.JSdelivr.net/npm/bootstrap@5.3.0/dist/CSS/bootstrap.min.CSS">
</head>
<body>
  <!-- 网页内容 -->
  
  <!-- 引入Bootstrap的JavaScript文件 -->
  <script src="https://cdn.JSdelivr.net/npm/bootstrap@5.3.0/dist/JS/bootstrap.bundle.min.JS"></script>
</body>

接下来，我们可以在需要添加工具提示的元素上添加data-bs-toggle和data-bs-placement属性来定义提示的触发方式和位置。例如，我们可以在一个按钮上添加工具提示，示例代码如下：

html
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="这是一个工具提示">按钮</button>

在上述代码中，data-bs-toggle="tooltip"表示这是一个工具提示，data-bs-placement="top"表示提示将显示在按钮的上方，title="这是一个工具提示"表示提示的内容。

在网页加载完成后，我们还需要初始化工具提示组件，以便使其生效。可以通过以下JavaScript代码来实现初始化：

Javascript
<script>
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
  })
</script>

以上代码会自动初始化所有带有data-bs-toggle="tooltip"属性的元素，并使其具备工具提示的功能。

现在，我们已经完成了基本的工具提示的添加和初始化。接下来，我们将实现当单击另一个工具提示时隐藏当前的工具提示的功能。为了实现这个功能，我们可以通过监听show.bs.tooltip事件来实现，代码如下：

Javascript
<script>
  // 监听工具提示的show.bs.tooltip事件
  document.addEventListener('show.bs.tooltip', function (event) {
    // 隐藏所有其他的工具提示
    var tooltips = document.querySelectorAll('.tooltip')
    Array.prototype.slice.call(tooltips).forEach(function (tooltip) {
      if (tooltip !== event.target) {
        bootstrap.Tooltip.getInstance(tooltip).hide()
      }
    })
  })
</script>

以上代码会在工具提示显示之前，隐藏网页中其他的工具提示。

示例代码

下面是一个完整的使用Bootstrap工具提示并实现在单击另一个工具提示时隐藏当前工具提示的示例代码：

html
<!DOCTYPE html>
<html>
<head>
  <Meta charset="UTF-8">
  <title>Bootstrap工具提示示例</title>
  <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://cdn.JSdelivr.net/npm/bootstrap@5.3.0/dist/CSS/bootstrap.min.CSS">
</head>
<body>
  <div class="contAIner">
    <h1>Bootstrap工具提示示例</h1>
    <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="这是第一个工具提示">按钮1</button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="这是第二个工具提示">按钮2</button>
    <button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="top" title="这是第三个工具提示">按钮3</button>
  </div>
  <script src="https://cdn.JSdelivr.net/npm/bootstrap@5.3.0/dist/JS/bootstrap.bundle.min.JS"></script>
  <script>
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
    })
    document.addEventListener('show.bs.tooltip', function (event) {
      var tooltips = document.querySelectorAll('.tooltip')
      Array.prototype.slice.call(tooltips).forEach(function (tooltip) {
        if (tooltip !== event.target) {
          bootstrap.Tooltip.getInstance(tooltip).hide()
        }
      })
    })
  </script>
</body>
</html>

通过以上步骤，我们可以使用Bootstrap工具提示为网页上的元素添加鼠标悬停提示信息，并通过添加一些自定义的JavaScript代码实现在单击另一个工具提示时隐藏当前的工具提示。这样可以提升用户体验，使用户更加方便地浏览网页。