Bootstrap 的工具提示在按钮单击和鼠标离开后不会消失

CSS

使用 Bootstrap 的工具提示可以为网页上的按钮、链接或其他元素添加提示信息，以提供更好的用户体验。默认情况下，工具提示会在鼠标悬停在元素上时显示，并在鼠标移开时自动消失。然而，有时我们希望工具提示在按钮单击后仍然保持可见，或者在鼠标离开元素后仍然保持显示。下面将介绍如何实现这些效果。

首先，我们需要在页面中引入 Bootstrap 的 CSS 和 JavaScript 文件。可以通过在 HTML 的 head 标签中添加以下代码来引入所需的文件：

html
<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">
<script src="https://cdn.JSdelivr.net/npm/bootstrap@5.3.0/dist/JS/bootstrap.bundle.min.JS"></script>

接下来，我们可以使用 Bootstrap 的 tooltip 组件来创建工具提示。在需要添加提示信息的元素上，添加 data-bs-toggle="tooltip" 属性，并将提示文本添加到 title 属性中。例如，下面的按钮将显示一个提示信息为 "点击我！" 的工具提示：

html
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="点击我！">
  按钮
</button>

默认情况下，工具提示会在鼠标悬停在按钮上时显示，并在鼠标移开时自动消失。如果我们希望工具提示在按钮单击后仍然保持可见，可以通过 JavaScript 来实现。

首先，我们需要为按钮添加一个点击事件监听器。可以通过为按钮添加 id 属性，并在 JavaScript 中获取该按钮的引用来实现。然后，我们可以使用 tooltip 方法来手动显示工具提示，并使用 dispose 方法来手动隐藏工具提示。例如，下面的代码将在按钮单击时显示工具提示，并在再次单击时隐藏工具提示：

html
<button type="button" class="btn btn-primary" id="myButton" data-bs-toggle="tooltip" title="点击我！">
  按钮
</button>
<script>
  var myButton = document.getElementById("myButton");
  var tooltip = new bootstrap.Tooltip(myButton);
  myButton.addEventListener("click", function() {
    if (tooltip._isOpen) {
      tooltip.dispose();
    } else {
      tooltip.show();
    }
  });
</script>

如果我们希望工具提示在鼠标离开按钮后仍然保持显示，可以通过设置 data-bs-trigger="manual" 属性来实现。然后，我们可以使用 JavaScript 来手动显示和隐藏工具提示。例如，下面的代码将在鼠标悬停在按钮上时显示工具提示，并在鼠标离开按钮后保持显示，直到再次鼠标悬停在按钮上时才隐藏工具提示：

html
<button type="button" class="btn btn-primary" id="myButton" data-bs-toggle="tooltip" data-bs-trigger="manual" title="点击我！">
  按钮
</button>
<script>
  var myButton = document.getElementById("myButton");
  var tooltip = new bootstrap.Tooltip(myButton);
  myButton.addEventListener("mouseenter", function() {
    tooltip.show();
  });
  myButton.addEventListener("mouseleave", function() {
    tooltip.hide();
  });
</script>

案例代码：

上述代码中，我们演示了如何使用 Bootstrap 的工具提示来在按钮上添加提示信息，并实现了工具提示在按钮单击和鼠标离开后不会消失的效果。通过添加相应的属性和使用 JavaScript 来手动控制工具提示的显示和隐藏，我们可以灵活地定制工具提示的行为，以满足不同的需求。

：

使用 Bootstrap 的工具提示可以为网页上的元素添加提示信息，提供更好的用户体验。通过设置相应的属性和使用 JavaScript 来手动控制工具提示的显示和隐藏，我们可以实现工具提示在按钮单击和鼠标离开后不会消失的效果。这为我们提供了更多的灵活性，以便根据具体需求来定制工具提示的行为。