JSFiddle - React, Tailwind, and code Playground

by chanaka1

HTML

<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-twipsy.js"></script>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-popover.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
<span class="popup-marker btn" data-content="Click outside the popover to close it." data-original-title="Popover A">Click me (A)</span>
<span class="popup-marker btn" data-content="Click outside the popover to close it." data-original-title="Popover B">Click me (B)</span>
</p>
<p>
<span class="popup-marker btn" data-content="Click outside the popover to close it." data-original-title="Popover C">Click me (C)</span>
<span class="popup-marker btn" data-content="Click outside the popover to close it." data-original-title="Popover D">Click me (D)</span>
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

JavaScript

jQuery(function() {
    var isVisible = false;
    
    var hideAllPopovers = function() {
       $('.popup-marker').each(function() {
            $(this).popover('hide');
        });  
    };
    
    $('.popup-marker').popover({
        html: true,
        trigger: 'manual'
    }).on('click', function(e) {
        // if any other popovers are visible, hide them
        if(isVisible) {
            hideAllPopovers();
        }

        $(this).popover('show');

        // handle clicking on the popover itself
        $('.popover').off('click').on('click', function(e) {
            e.stopPropagation(); // prevent event for bubbling up => will not get caught with document.onclick
        });
        
        isVisible = true;
        e.stopPropagation();
    });

    
    $(document).on('click', function(e) {
        hideAllPopovers();
        isVisible = false;
    });
});