Manual Trigger of Bootstrap Popupups

by mcannon

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<a class="btn" id="requests" data-toggle='popover' data-placement='bottom' data-original-title='&lt;b&gt;Requests&lt;/b&gt;' data-content='My content goes here'>Clear All</a>
<a class="btn" id="messages" data-toggle='popover' data-placement='bottom' data-original-title='&lt;b&gt;Messages&lt;/b&gt;' data-content='My content goes here'>Show All</a>
<a class="btn" id="x1" data-toggle='popover' data-placement='bottom' data-original-title='&lt;b&gt;x1&lt;/b&gt;' data-content='My content goes here'>x1</a>
<a class="btn" id="x2" data-toggle='popover' data-placement='bottom' data-original-title='&lt;b&gt;x2&lt;/b&gt;' data-content='My content goes here'>x2</a>

CSS

body { padding: 100px; }

JavaScript

$(function (){
    console.log('start');
    
    $('#x1').on('click', function () {
        console.log('messages');
        $(this).popover('show');
    });
    
   $('#requests').on('click', function (e) {
        console.log('requests');
        $('[data-toggle="popover"]').popover('hide');
    });
    
    $('#messages').on('click', function () {
        console.log('messages');
        $('[data-toggle="popover"]').popover('show');
    });
    
      $('[data-toggle="popover"]').popover({
			placement: 'bottom',
			trigger: 'manual',
			container: 'body'});

});