Bootstrap 3.0 ToolTips

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="cart"> 
    <a data-toggle="tooltip" title="Dummy Tooltip">
        <i class="icon-question"></i>
    </a>
</div>

CSS

body, html {
  min-height:100vh;
}
.cart {
    overflow:hidden;
    padding:10px 3px;
    background: yellow;
    text-align:center;
}

JavaScript

$('a[data-toggle="tooltip"]').tooltip({
    animated: 'fade',
    placement: 'bottom',
    trigger: 'click'
});

$('a[data-toggle="tooltip"]').click(function(event){
	event.stopPropagation();
});

$('body').click(function(){
	$('a[data-toggle="tooltip"]').tooltip('hide');
});