ModalPopover

HTML

<script src="http://scruffles.github.com/BootstrapModalPopover/lib/bootstrap-2.1.1/js/bootstrap.min.js"></script>
<script src="http://scruffles.github.com/BootstrapModalPopover/src/bootstrap-modal-popover.js"></script>
<link rel="stylesheet" href="http://scruffles.github.com/BootstrapModalPopover/lib/bootstrap-2.1.1/css/bootstrap.min.css">
<div class="page">
    
<button class="btn" onclick="$('#dialog').modalPopover('show');">show</button>
<button class="btn" onclick="showBriefly();">show breifly</button>
<button class="btn" onclick="useToggle();">use toggle</button>
    
<p>This is the <span id="target">target</span></p>
    
<p>Events:<div id="events"></div></p>    

<div id="dialog" class="popover">
   <div class="arrow"></div>
   <h3 class="popover-title">JavaScript Access</h3>
   <div class="popover-content">
          This popup was created and loaded using javascript rather than
          data tags
   </div>
</div>
    
</div>

CSS

.page {
    margin:50px
}

p {
    margin-top:50px;
}

#events {
    background: lightgrey;
    overflow:scroll;
    height: 200px;
    padding: 5px;
}

JavaScript

$('#dialog').modalPopover({
    target: '#target',
    placement: 'bottom'
});

$('#dialog').on('show', function() {
    $('#events').append('show<br/>');
});
$('#dialog').on('shown', function() {
    $('#events').append('shown<br/>');
});
$('#dialog').on('hide', function() {
    $('#events').append('hide<br/>');
});
$('#dialog').on('hidden', function() {
    $('#events').append('hidden<br/>');
});

window.showBriefly = function() {
    $('#dialog').modalPopover('show');
    setTimeout(function() {
        $('#dialog').modalPopover('hide');
    }, 3000);
}

window.useToggle = function() {
    $('#dialog').modalPopover('toggle');
    setTimeout(function() {
        $('#dialog').modalPopover('toggle');
    }, 3000);
}