Popover Example

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<div class="well">  
<a href="#" id="hover" class="btn btn-submit" data-placement"bottom" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>  
</div>

JavaScript

$(document).ready(function() {
  $('.btn').popover(
    {
      placement: 'right',
      offset: 15,
      trigger: 'manual',
      delay: { show: 350, hide: 100 },
      html: true,
    }
  );
    var timer,
        popover_parent;
    function hidePopover(elem) {
        $(elem).popover('hide');
    }
    $('.btn').hover(
        function() {
          var self = this;
          clearTimeout(timer);
          $('.popover').hide(); //Hide any open popovers on other elements.
          popover_parent = self
          $(self).popover('show');            
        }, 
        function() {
          var self = this;
          timer = setTimeout(function(){hidePopover(self)},300);                 
    });
    $('.popover').live({
      mouseover: function() {
        clearTimeout(timer);
      },
      mouseleave: function() {
        var self = this;
        timer = setTimeout(function(){hidePopover(popover_parent)},300); 
      }
    });
});