JSFiddle - React, Tailwind, and code Playground

by Kiwiupover

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="container">
    <div class="well">
        <div class="pop" id="example" rel="popover"><a href="http://kiwiupover.com" traget="_blank">Dave's kiwi backery</a></div> 
    </div>
</div>

CSS

.well {
    padding-left:100px;
    margin-top: 200px;
}
.box {
    width:200px;
    height:100px;
    color:black;
}
.muted {
    color: gray;
}

#example, #example1 {
    position:relative;
    display: block;
    float: left;
}

JavaScript

$('.pop').popover({
    html: true,
    trigger: 'hover',
    container: '#example',
    placement: 'top',
    content: function () {
            var html = '<div class="box">' +
                    '<a href="http://kiwiupover.com">Dave\'s kiwi backery</a>' +
                    '<div class="muted">34 reviews</div>' +
                    '</div>';
        return html;
    },
    animation: false
}).on({
    show: function (e) {
        var $this = $(this);

        // Currently hovering popover
        $this.data("hoveringPopover", true);
        
        // If it's still waiting to determine if it can be hovered, don't allow other handlers
        if ($this.data("waitingForPopoverTO")) {
            e.stopImmediatePropagation();
        }
    },
    hide: function (e) {
        var $this = $(this);
        
        // If timeout was reached, allow hide to occur
        if ($this.data("forceHidePopover")) {
            $this.data("forceHidePopover", false);
            return true;
        }
        
        // Prevent other `hide` handlers from executing
        e.stopImmediatePropagation();
        
        // Reset timeout checker
        clearTimeout($this.data("popoverTO"));
        
        // No longer hovering popover
        $this.data("hoveringPopover", false);
        
        // Flag for `show` event
        $this.data("waitingForPopoverTO", true);
        
        // In 1500ms, check to see if the popover is still not being hovered
        $this.data("popoverTO", setTimeout(function () {
            // If not being hovered, force the hide
            if (!$this.data("hoveringPopover")) {
                $this.data("forceHidePopover", true);
                $this.data("waitingForPopoverTO", false);
                $this.popover("hide");
            }
        }, 300));
        
        // Stop default behavior
        return false;
    }
}).on({
    show: function () {
        console.log("shown");
    },
    hide: function () {
       ...