JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-popover.js"></script>
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<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;
}

.popover.bottom .arrow {
    left: 0%;
    padding-left:50%;
    padding-right:50%;
}

#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,
    delay: {hide: 200 }
});