如何使 Bootstrap 弹出窗口在悬停而不是单击时出现消失？

在使用 Bootstrap 弹出窗口时，通常是在单击某个按钮或链接时才会出现，而当鼠标移开时则会自动消失。但如果希望让弹出窗口在鼠标悬停在按钮或链接上时就出现，并在鼠标移开时消失，该如何实现呢？

下面介绍两种方法，分别使用 jQuery 和纯 CSS 实现。

使用 jQuery 实现

jQuery 提供了 hover() 方法，可以在鼠标悬停和移开时执行不同的操作。因此，我们可以使用 hover() 方法来控制弹出窗口的显示和隐藏。

HTML 代码片段：

<a href="#" data-toggle="popover" data-trigger="hover" data-content="这是一个示例弹出窗口">悬停显示</a>

JavaScript 代码片段：

$(function() {
  $('[data-toggle="popover"]').popover();
  $('[data-toggle="popover"]').on('mouseenter', function() {
    var _this = this;
    $(this).popover('show');
    $('.popover').on('mouseleave', function() {
      $(_this).popover('hide');
    });
  }).on('mouseleave', function() {
    var _this = this;
    setTimeout(function() {
      if (!$('.popover:hover').length) {
        $(_this).popover('hide');
      }
    }, 100);
  });
});

在 HTML 代码中，我们添加了 data-trigger="hover" 属性，告诉 Bootstrap 在悬停时触发弹出窗口的显示和隐藏。

在 JavaScript 代码中，我们使用 popover() 方法初始化弹出窗口，并添加了 mouseenter 和 mouseleave 事件的监听器，用于在鼠标悬停和移开时显示和隐藏弹出窗口。其中，mouseenter 事件监听器中还创建了一个新的 mouseleave 事件监听器，用于在弹出窗口内部移开鼠标时也能及时隐藏弹出窗口。

使用纯 CSS 实现

除了使用 jQuery 外，也可以使用纯 CSS 实现弹出窗口在悬停时出现消失。这里使用 CSS3 中的 :hover 伪类和 opacity 属性来控制弹出窗口的显示和隐藏。

HTML 代码片段：

<a href="#" data-toggle="tooltip" title="这是一个示例提示框" data-placement="bottom">悬停显示</a>

CSS 代码片段：

a[data-toggle="tooltip"]:hover::before {
  content: attr(title);
  position: absolute;
  top: -30px;
  left: 0;
  padding: 5px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0px 0px 5px rgba(0,0,0,.3);
  opacity: 1;
  z-index: 999;
  white-space: nowrap;
}

a[data-toggle="tooltip"]:hover {
  cursor: pointer;
}

a[data-toggle="tooltip"]::before {
  content: attr(title);
  opacity: 0;
  pointer-events: none;
}

在 HTML 代码中，我们添加了 data-placement="bottom" 属性，告诉 Bootstrap 弹出窗口应该在按钮或链接的底部出现。

在 CSS 代码中，我们使用 :hover 伪类和 opacity 属性来实现弹出窗口的显示和隐藏。其中，:before 伪元素用于显示弹出窗口的内容，并设置了位置、样式、透明度等属性。原始元素本身的 ::before 伪元素用于控制弹出窗口的出现和消失。

注意，使用 CSS 实现弹出窗口可能会比较局限，无法实现一些复杂的效果，如弹出窗口的位置、样式、动画等。但它的优点在于无需使用 JavaScript，可以提高页面性能和加载速度。

以上就是使用 jQuery 和纯 CSS 分别实现 Bootstrap 弹出窗口在悬停而不是单击时出现消失的方法。可以根据具体情况选择适合的方法使用。