JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
   
</head>

<body>
<span class="mypopover" data-html="true" data-toggle="popover"
        title="Title"
        data-content="Content">my popover</span><br><br>


    <button type="button" class="btn btn-lg btn-danger mypopover" data-toggle="popover" title="Popover title"
        data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button><br>
    <button onclick="addPopover()">Click me</button><br>

    <div id="mycontainer"></div>
</body>

</html>

JavaScript

jQuery(function ($) {

    $("body").popover({
            trigger: "click",
            sanitize: false,
            html: true,
            animation: true,
            selector: '.mypopover',
            container: '#mycontainer',
        });
    $(document).on("click", ".mypopover", function (event) {
        event.stopPropagation();
    });
    $(document).on("click", function () {
        $(".mypopover").popover("hide");
    });
})

function addPopover() {
    const body = $("body");
    body.append(`<span class="mypopover" data-html="true" data-toggle="popover"
        title="Title"
        data-content="Content">my popover</span><br><br>`);
}