Bootstrap Draggable Popover Snippet

by Annie Lagang

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<a href="#" data-trigger="manual" data-toggle="popover" data-placement="right" data-content="Here is some amazing content. It's very engaging. right?" data-original-title="Popover Title">
  <img src="//placehold.it/150/F1F1F1/777" id="img1">
</a>

JavaScript

$('body').on('click', function (e) {
    $('[data-toggle=popover]').each(function () {
        // hide any open popovers when the anywhere else in the body is clicked
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

$("[data-toggle=popover]").mousedown(function(){
  // toggle popover when link is clicked
  $(this).popover('toggle');
});

$("[data-toggle=popover]").draggable({
  stop:function(){
    // show popover when drag stops
    $(this).popover('show');
  }
});