<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Left</button>

          	<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Top</button>

          	<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">Bottom</button>

          	<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Right</button>
          

Note:Tooltips have to be initialized with jQuery: select the specified element and call the tooltip() method. The following code will enable all tooltips in the document:

$(document).ready(function(){
   $('[data-toggle="tooltip"]').tooltip({animation: true, delay: {show: 300, hide: 300}});   
});

Note:Tooltips have to be initialized with jQuery: select the specified element and call the tooltip() method. The following code will enable all tooltips in the document:

$(document).ready(function(){
   $('[data-toggle="tooltip"]').tooltip({animation: true, delay: {show: 300, hide: 300}});   
});

Simple popover

By default, the popover will appear on the right side of the element. Use the data-placement attribute to set the position of the popover on top, bottom, left or the right side of the element:

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left</button>

          	<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top</button>

          	<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
          	sagittis lacus vel augue laoreet rutrum faucibus.">Bottom</button>

          	<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right</button>
          

Note: Popovers have to be initialized with jQuery: select the specified element and call the popover() method. The following code will enable all popovers in the document:

$(document).ready(function(){
    $('[data-toggle="popover"]').popover({animation: true, delay: {show: 100, hide: 100}}); 
});

          

* All code examples are taken from the Material design website.