JSFiddle - React, Tailwind, and code Playground

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 id="example" class="btn btn-danger" rel="popover">hover for popover</div> 
    </div>
</div>

CSS

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

#example {
    position:relative;
}

JavaScript

$('#example').popover({
    html: true,
    trigger: 'hover',
    container: '#example',
    placement: 'bottom',
    content: function () {
        return '<div class="box">here is some content</div>';
    },
    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");
            }
        }, 1500));
        
        // Stop default behavior
        return false;
    }
}).on({
    show: function () {
        console.log("shown");
    },
    hide: function () {
        console.log("hidden");
    }
});