Bootstrap Popover Persistent on Hover

by Cris F

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="p-5">
  <button type="button" 
          class="btn btn-primary" 
          data-toggle="popover" 
          title="Popover Title" 
          data-content="Popover Contents">Test Popover</button>
</div>

JavaScript

$(function(){
    $('body').popover({
       selector: '[data-toggle="popover"]',
       trigger: 'hover',
       container:'body',
       animation:false
    }).on('hide.bs.popover', function () {
        if ($(".popover:hover").length) {
          return false;
        }                
    }); 
    
    $('body').on('mouseleave', '.popover', function(){
       	$('.popover').popover('hide');
    });
});