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="" 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() {

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

});

/*
  $( '[data-toggle="popover"]' ).on( 'shown.bs.popover', function () {
    $(this).addClass( 'popover-active' );
  });
  $( '[data-toggle="popover"]' ).on( 'hide.bs.popover', function () {
    $(this).removeClass( 'popover-active' );
  });

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

    if ( ! $( e.target ).parent().hasClass( 'popover-active' ) ) {
      $( '.popover-active' ).prev( 'a[data-toggle="popover"]' ).not( e.target ).popover( 'toggle' );
    }
  });

*/