Bootstrap popover

This is a simple Bootstrap popover example

by Jorgelig

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<a
href="#" id="example1" class="btn large primary" rel="popover" data-content="<a href='#' class='twopopover' rel='popover' data-content='Lorem ipsum' data-original-title='Inside'>Example 3</a>!!!"
data-original-title="Example 3 title">Button 1</a>

<a
href="#" id="example2" class="btn large primary" rel="popover" data-content="<a href='#' class='twopopover' rel='popover' data-content='Lorem ipsum' data-original-title='Inside'>Example 3</a>!!!"
data-original-title="Example 3 title">Button 2</a>

<a
href="#" id="example3" class="btn large primary" rel="popover" data-content="<a href='#' class='twopopover' rel='popover' data-content='Lorem ipsum' data-original-title='Inside'>Example 3</a>!!!"
data-original-title="Example 3 title">Button 3</a>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 .container {
    margin: 40px;
}

JavaScript

// http://stackoverflow.com/questions/16588632/how-to-popover-inside-other-popover-with-bootstrap

$(function () {

    var overPopup = false;

    $('[rel=popover]').popover({
        trigger: 'manual',
        placement: 'bottom'

    // replacing hover with mouseover and mouseout
    }).mouseover(function (e) {
        // when hovering over an element which has a popover, <hide></hide>
        // them all except the current one being hovered upon
        $('[rel=popover]').not('#' + $(this).attr('id')).popover('hide');
        var $popover = $(this);
        $popover.popover('show');
        var x = $($popover).data('popover').tip().find('.twopopover');
        $(x).popover();
        
        /*
        $(x).popover({trigger: 'manual'})
        .mouseover(function(e){
            $popover.data('popover').tip().mouseenter(function () {
                overPopup = true;
                console.log(this);
            }).mouseleave(function () {
                overPopup = false;
                $popover.popover('hide');
            });            
        })
        .mouseout(function(e){});
    */
        // set a flag when you move from button to popover
        // dirty but only way I could think of to prevent
        // closing the popover when you are navigate across
        // the white space between the two
        $popover.data('popover').tip().mouseenter(function () {
            overPopup = true;
            console.log(this);
        }).mouseleave(function () {
            overPopup = false;
            $popover.popover('hide');
        });
        

    }).mouseout(function (e) {
        // on mouse out of button, close the related popover
        // in 200 milliseconds if you're not hovering over the popover
        var $popover = $(this);
        setTimeout(function () {
            if (!overPopup) {
                $popover.popover('hide');
            }
        }, 200000000);
    });
});