JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<body>
    <ul>
        <li><a href="#" class="btn" data-content="some supplemental content">link 1</a></li>
        <li><a href="#" class="btn" data-content="other interesting stuff you might be interested in.">link 2</a></li>
        <li><a href="#" class="btn" data-content="id: 19839873129487329487135">link 3</a></li>
    </ul>
</body>

JavaScript

$(function() {

  $('.btn').popover({'trigger': 'manual', 'placement':'right'});

  $('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');
    }
  });
});