bootstrap popover - div disappears on mouse movement

I'm using bootstrap popover where my div appears correctly on mouse over. However the div disappears when I move the mouse. Here is the code. I want the div to stay unless user clicks somewhere else.

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

I found a related jsfiddle example to explain the problem better.

Solution

You can use the manual trigger and write your own event handlers to do what you want.

In the below, I'm using JQuery to show the popover on the next mouseenter event, and then on any click in the document, I'm hiding the popover and resetting the event handler for the next mouseenter event.

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

Here is a jsfiddle of the same: http://jsfiddle.net/a8kamz92/

Update

Here's an example showing how to apply the same logic to multiple popovers. The basic premise is to use a JQuery selector that matches more than one popover. This is just an example of one way to match multiple popovers; more specific selectors can be used to suit your needs.

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

Here's the jsfiddle as well: http://jsfiddle.net/erv5ssoy/