Cacher is the code snippet organizer for pro developers

name: BS Popover
description: Bootstrap popover
authors:
  - Rhythm
resources:
  - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
  - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
normalize_css: no
wrap: b
panel_js: 1
panel_css: 1

$(function(){
    $("[data-toggle=popover]").popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});

<!-- Popover #1 -->
<a href="#" class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a1" data-placement="top">Popover Example</a>

<hr>

<!-- Popover #2 -->
<a href="#" class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a2">Popover Example</a>



<!-- Content for Popover #1 -->    
<div id="a1" class="hidden">
    <div class="popover-heading">This is the heading for #1</div>
    
    <div class="popover-body">This is the body for #1</div>
</div>   
    
<!-- Content for Popover #2 -->
<div id="a2" class="hidden">
    <div class="popover-heading">This is the heading for #2</div>
    
    <div class="popover-body">This is the body for #2<br>
        With <b>html</b> content    
    </div>
</div>    

/* Bootstrap Popover on hover
 * Problem: When the user moves the mouse on the popover, it should not close
 * Solution from fiddle - http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/
 */

var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){
  var self = obj instanceof this.constructor ?
    obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
  var container, timeout;

  originalLeave.call(this, obj);

  if(obj.currentTarget) {
    container = $(obj.currentTarget).siblings('.popover')
    timeout = self.timeout;
    container.one('mouseenter', function(){
      //We entered the actual popover – call off the dogs
      clearTimeout(timeout);
      //Let's monitor popover content instead
      container.one('mouseleave', function(){
        $.fn.popover.Constructor.prototype.leave.call(self, self);
      });
    })
  }
};


$('body').popover({ selector: '[data-popover]', trigger: 'click hover', placement: 'auto', delay: {show: 50, hide: 400}});