POPOVER - BS4 - BIZ USAGE

by bizamajig

HTML

<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<h3>Using <em>data-content</em> attribute as text:</h3>
<a data-toggle="popover" data-title="Popover Title" data-content="Text from data-content attribute!" class="btn btn-primary btn-large" href="#" data-original-title="A Title">Click to toggle popover</a>

<hr />

<h3>Using <em>data-content</em> attribute as CSS selector:</h3>
<a data-toggle="popover" data-title="Popover Title" data-content="#countdown-popup" class="btn btn-default btn-large" href="#" data-original-title="A Title">Click to toggle popover</a>
<div id="countdown-popup" class="hide">Text from <code>#countdown-popup</code> element!</div>

JavaScript

$('[data-toggle="popover"]').popover({
	html: true,
	content: function() {
				var content = $(this).data('content') || '';
        try { content = $(content).html() } catch(e) {/* Ignore */}
        return content;
  }
});
$( document ).on( 'click', function(e) {
    $('[data-toggle="popover"]').each(function() {
      if ( ! $(this).is( e.target ) && $(this).has(e.target).length === 0 && $('[data-toggle="popover"]').has(e.target).length === 0) {
console.log( 'CLOSING 1 -', e.target, $('[data-toggle="popover"]').has(e.target).length );
        //$('[data-toggle="popover"]').not(this).popover('hide');
        $(this).popover( 'hide' ).next('.popover').remove();
      }
    });
  });