bootstrap popover - 鼠标移动时 div 消失

Question

我正在使用引导弹出框，我的 div 在鼠标悬停时正确显示。但是，当我移动鼠标时，div 消失了。这是代码。我希望 div 保留，除非用户点击其他地方。

<div rel="popover" data-trigger="hover" data-placement="top" data-original-title="<h4>Deceased & Informant</h4>" data-content="'.$content.'" data-html="true">data

我找到了一个相关的 jsfiddle example 来更好地解释这个问题。

Answer 1

您可以使用manual 触发器并编写自己的事件处理程序来执行您想要的操作。

在下面，我使用 JQuery 在下一个 mouseenter 事件上显示弹出框，然后在文档中的任何单击时，我将隐藏弹出框并为下一个 mouseenter 重置事件处理程序事件。

$(function() {
  $('#popoverData').one('mouseenter', function() {
    $(this).popover('show');
  });

  $(document).on('click', function() {
    $('#popoverData').popover('hide');
    $('#popoverData').one('mouseenter', function() {
      $(this).popover('show');
    });
  });
});

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');

.container {
    margin: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

<div class="container">

    <a id="popoverData" class="btn" href="#" data-content="Popover with manual data-trigger" rel="popover" data-placement="bottom" data-original-title="Title" data-trigger="manual">Popover with manual data-trigger</a>
    
</div>

这是一个相同的 jsfiddle：http://jsfiddle.net/a8kamz92/

更新

这是一个示例，展示了如何将相同的逻辑应用于多个弹出框。基本前提是使用匹配多个弹出框的 JQuery 选择器。这只是匹配多个弹出框的一种方法的示例；可以使用更具体的选择器来满足您的需求。

$(function() {
  var popoversSelector = '.has-popover div[rel=popover]';

  $(popoversSelector).one('mouseenter', function() {
    $(this).popover('show');
  });

  $(document).on('click', function() {
    var popovers = $(popoversSelector);

    popovers.popover('hide');
    popovers.one('mouseenter', function() {
      $(this).popover('show');
    });
  });
});

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');

.container {
    margin: 40px;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>


<table class="table">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td class="has-popover">
      <div rel="popover"
           data-trigger="manual"
           data-placement="bottom"
           data-original-title="Informant"
           data-content="content"
           data-html="true">
             January
      </div>
    </td>
    
    <td class="has-popover">
      <div rel="popover"
           data-trigger="manual"
           data-placement="bottom"
           data-original-title="Informant"
           data-content="content"
           data-html="true">
             $100
      </div>
    </td>
  </tr>
</table>

这里也是 jsfiddle：http://jsfiddle.net/erv5ssoy/