Question

我正在使用bootstrap popover，我的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事件中显示popover，然后在文档中的任何点击中，我隐藏了popover并重置了事件处理程序对于下一个mouseenter事件。

＆＃13;

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

＆＃13;

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');

.container {
    margin: 40px;
}

＆＃13;

<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>

＆＃13;

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

更新

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

＆＃13;

$(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');
    });
  });
});

＆＃13;

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');

.container {
    margin: 40px;
}

＆＃13;

<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>

＆＃13;

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

bootstrap popover - div在鼠标移动时消失

1 个答案:

更新