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">
    <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>

JavaScript

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


$( '.more-actions' ).each( function( i ) {
/*DEBUG POPOVER*/console.log( 'DEBUG - POPOVER - CONSIDER =', $element );
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
//		Get our EOI and related title for the popover/tooltip
//
		var $element																			= $(this),
			input__toggle																		= $element.data( 'toggle' )						|| '',
			input__tooltip_tooltip																= $element.data( 'tooltip' )					|| '',
			input__container																	= $element.data( 'container' )					|| 'body';

/*
		<button
			type="button"
			class="options"
			data-toggle="popover"
			data-placement="left"
			data-html="true"
			data-content='
				<ul class="popover-options list-unstyled">
					<li>
						<a href="#">Edit</a>
					</li>
					<li>
						<a href="#">Delete this code</a>
					</li>
					<li>
						<a class="disabled" href="#">Undo</a>
					</li>
				</ul>
			'
			data-original-title="Construction Equipment"
			title="Construction Equipment"
		>
			Edit Options
		</button>

		$( '[data-toggle=popover]' ).popover({
			html: 																				true,
			trigger: 																			'click, hover, focus',
			animate: 																			true,
			placement: 																			'left'
		});
*/

		if	(
			( input__toggle																		=== 'popover' )
			) {
/*
//
//			SEE - https://jsfiddle.net/bizamajig/jsL40bq6/
//
//			This solution gives you the ability to dismiss the popover upon clicking anywhere else on
//			the page including another popover link but allows you to click on the popover itself without
//			dismissing it so that the popover can be accessed by the user for things like copy pasting text.
//
			$('[data-toggle="popover"]').popover({'trigger': 'manual', 'placement':'right'});

//
//			Dismiss other open popups so we only have one open at a time.
//
//			NOTE -...