Bootstrap 2.3.2 Skeleton

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>


<div class="container">
    
    <button type="button" class="btn btn-primary btnHover">Hover</button> <br/><br/>   
</div>

JavaScript

function createHoverPopover(htmlContent, jqueryElement, direction) {
    jqueryElement.popover({
        html: true,
        placement: direction,
        trigger: "hover",
        content: htmlContent,
        selector: true
    });
}

var html = '<iframe src="http://www.corrieredellasera.it"></iframe>';

createHoverPopover(html, $(".btn.btn-navbar"), "bottom");
//create hover dynamically depends on the html content
$("button.btnHover").each(function(){
    createHoverPopover(html, $(this), "right");
});