Tooltip
<button type="button" class="btn btn-default" id="left" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery("#left").tooltip({ placement : 'left'});
});
</script>
Popover
Click to top
Click to left
Click to bottom
Click to right
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery("div#top").popover({
placement : 'top'
});
});
</script>
<div
<div class="btn btn-md btn-danger">
data-toggle="popover" title="PopOver Demo"
data-content="The size of the pop over depends upon the text area"
role="button">Click to toggle popover top</div>
</div>