如何使Bootstrap popover在悬停而不是单击时显示消失？(1)

📌 相关文章

📜 如何使Bootstrap popover在悬停而不是单击时显示消失？(1)

📅 最后修改于: 2023-12-03 14:51:49.568000 🧑 作者: Mango

如何使 Bootstrap Popover 在悬停而不是单击时显示消失？

介绍

Bootstrap 是一个流行的前端框架，提供了许多易于使用且具有可定制性的组件。其中一个组件是 Popover，它可以在用户与页面上的元素交互时显示一段信息。

默认情况下，Bootstrap Popover 在用户点击元素时显示，并在用户再次点击或点击页面的其他位置时关闭。然而，有时候我们可能希望 Popover 在用户悬停元素时显示，并在用户离开元素时自动消失。

本文将介绍如何通过使用 Bootstrap 的 JavaScript API 来实现此目的。

步骤

在下面的步骤中，我们将向您展示如何通过在 JavaScript 中使用 Bootstrap 的 API 将 Popover 更改为在悬停时显示消失。

在 HTML 文件的 <head> 标签中添加以下样式表和脚本链接：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

在需要使用 Popover 的元素上添加 data-toggle 和 data-content 属性：

<button type="button" class="btn btn-primary" data-toggle="popover" data-content="这是一个 Popover">悬停显示 Popover</button>

在 JavaScript 文件中，通过 jQuery 或纯 JavaScript 获取元素，并初始化 Popover：

使用 jQuery：

$(document).ready(function() {
  $('[data-toggle="popover"]').popover({trigger: "hover"});
});

使用纯 JavaScript：

document.addEventListener("DOMContentLoaded", function() {
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="popover"]'));
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl, {
      trigger: "hover"
    });
  });
});

解释

第一步

我们需要包含 Bootstrap 的 CSS 和 JavaScript 文件，以便正确显示 Popover。通过在 HTML 文件的 <head> 标签中添加样式表和脚本链接，我们可以引入这些文件。

第二步

在需要使用 Popover 的元素上，添加 data-toggle="popover" 和 data-content="..." 属性。data-toggle="popover" 告诉 Bootstrap 将该元素用作 Popover 的触发器。data-content="..." 指定 Popover 显示的内容。

第三步

使用 jQuery 或纯 JavaScript 获取具有 data-toggle="popover" 属性的元素，并初始化 Popover。

如果使用 jQuery，通过在文档加载完成后调用 $('[data-toggle="popover"]').popover({trigger: "hover"}) 实现。

如果使用纯 JavaScript，我们需要在 DOMContentLoaded 事件监听器中初始化 Popover。我们首先获取具有 data-toggle="popover" 属性的元素，并对每个元素调用 bootstrap.Popover 构造函数进行初始化。

在这两种情况下，我们都将 trigger 选项设置为 "hover"，以确保 Popover 在悬停时触发。

结论

通过按照上述步骤，您可以使用 Bootstrap 的 Popover 组件在悬停而不是单击时显示消失。这样可以提供更好的用户体验，并为用户提供更直观的交互效果。