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="#" data-toggle="popover" data-content="some supplemental content">link 1</a></li>
        <li><a href="#" data-toggle="popover" data-content="other interesting stuff you might be interested in.">link 2</a></li>
        <li><a href="#" data-toggle="popover" data-content="id: 19839873129487329487135">link 3</a></li>
    </ul>
</body>

JavaScript

$(function() {

  $('[data-toggle="popover"]').popover({'trigger': 'manual', 'placement':'right'});

  $('html').on('click', function(e) {
//  if($(e.target).hasClass('btn')) {
    if($(e.target).attr('[data-toggle="popover"]')) {
      $(e.target).popover('toggle');
    }

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