JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
    <ul>
        <li><a href="#" class="" tabindex="0" data-toggle="popover" data-content="some supplemental content">link 1</a></li>
        <li><a href="#" class="" tabindex="0" data-toggle="popover" data-content="other interesting stuff you might be interested in.">link 2</a></li>
        <li><a href="#" class="" tabindex="0" data-toggle="popover" data-content="id: 19839873129487329487135">link 3</a></li>
    </ul>
</body>

JavaScript

$(function() {

                $('body').popover({
                    selector: '[data-toggle=popover]',
                    trigger: "click"
                }).on("show.bs.popover", function(e){
                    // hide all other popovers
                    $("[data-toggle=popover]").not(e.target).popover("destroy");
                    $(".popover").remove();                    
                }).on("hide.bs.popover", function(){
                    console.log("i'm hiding");
                    
                });
                return true;
                
  $('[data-toggle="popover"]').popover({'trigger': 'manual', 'placement':'right'});

  if ( false ) $('html').on('click', function(e) {
    if($(e.target).hasClass('btn')) {
      $(e.target).popover('toggle');
    }

    if(!$(e.target).parent().hasClass('popover')) {
      $('.popover').prev('a').not(e.target).popover('toggle');
    }
  });
});