bootstrap 弹出框 - div 在鼠标移动时消失

Question

我正在使用 bootstrap 弹出框，鼠标悬停时我的 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">
             0
      </div>
    </td>
  </tr>
</table>

这里还有 jsfiddle：http://jsfiddle.net/erv5ssoy/

bootstrap 弹出框 - div 在鼠标移动时消失

bootstrap popover - div disappears on mouse movement

javascript

twitter-bootstrap

popover

更新