POPOVER - How to close a Twitter Bootstrap popover by clicking outside

How to close a Twitter Bootstrap popover by clicking outside

by bizamajig

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="bs-example tooltip-demo">
    <div class="bs-example-tooltips">
        <input type="text" class="form-control" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title=""/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <input type="text" class="form-control" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title=""/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
            <input type="text" class="form-control" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title=""/>
    </div>
</div>

CSS

.form-control{    
    width:200px;
}

JavaScript

var close = true;
$('[data-toggle="popover"]').popover({trigger:"manual"});

$(document).on('mousedown', function (e) {
    if($(e.target).attr('class') == 'popover-content')
        close = false;
    else
        close = true; 
});


$('.form-control').blur(function(event,e){
    if(close)
        $(this).popover('hide');
    else {
       $(this).focus();
        close = true;
    }
});

$('.form-control').focus(function(){
   if(close)
       $(this).popover('show'); 
});