JSFiddle - React, Tailwind, and code Playground

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>
    
    
    <button type="button" class="btn btn-lg btn-danger myClick" data-toggle="popover" title="Popover title <button type='button' class='btn'>button</button>" data-content="<button type='button' class='btn'>button</button> And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

<button type="button" class="btn btn-lg btn-danger myHover" data-toggle="popover" title="Popover title <button type='button' class='btn'>button</button>" data-content="<button type='button' class='btn'>button</button> And here's some amazing content. It's very engaging. Right?">Hover to toggle popover</button>

<div class="bootstrap-container" id="bootstrap-container"></div>
    
    </body>

JavaScript

jQuery(function ($) {
$(document).popover({ 
	trigger: 'manual', 
  sanitize: false, 
  html: true, 
  animation: true, 
  selector: '.myHover', 
  container: '#bootstrap-container'})
  
  .on('mouseenter', '.myHover', function () { 
  	const _this = this; 
    $(this).popover("show"); 
    $(".popover").on("mouseleave", function () { 
    	$(_this).popover("hide"); }); })
   .on('mouseleave', '.myHover', function () { 
   		const _this = this; 
      setTimeout(function () { 
      if (!$('.popover:hover').length) { 
      	$(_this).popover('hide'); } }, 
        300); 
    }); 

$('body')
		.popover({
    		trigger: 'click',
        sanitize: false,
        html: true,
        animation: true,
        selector: '.myClick',
        container: '#bootstrap-container',
});
$('body').on('click', '.myClick', function (event) {
        event.stopPropagation();
});
$('body').on('click', function () {
		$('.myClick').popover('hide');
});

})