JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<img src="http://jsfiddle.net/img/logo.png" />

<div id="popover-head">
    Stay Up To Date
</div>
<div id="popover-content">
    <input type="text" placeholder="your email address" />
</div>

CSS

img {
    background-color: #4679bd;
    padding: 20px 60px;
}
#popover-head,
#popover-content {
    display: none;
}
.popover-content input {
    width: 195px;
}

JavaScript

$('img').popover({
    placement: 'bottom',
    html : true,
    title: function() {
        return $("#popover-head").html();
    },
    content: function() {
        return $("#popover-content").html();
    }
}).mouseenter(function () {
    if (!$(this).parent().find('.popover').length) {
        $(this).popover('show');
    }
});