Bootstrap 4
  Prev Page
Next Page  
Bootstrap 4 Tooltips
Bootstrap 4 tooltip component is small pop-up box that appears when the user moves the mouse over an element. Adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage. 

To create a tooltip, add the data-toggle="tooltip" attribute to an element. Use the title attribute to specify the text that should be displayed inside the tooltip.
Include Javascript

Initialize all tooltips on a page would be to select them by their data-toggle attribute

<script type="text/javascript">
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();  
});
</script>
Output :
Tooltip on a Link & Button

Here's a basic example of applying a tooltip to a Link and Button.

<p class="text-center">
	<a target="_blank" href="http://www.freetimelearning.com/" data-toggle="tooltip" data-placement="top" title="Free Time Learning">Tutorials</a>
</p>

<p class="text-center">
	<button class="btn btn-primary btn-sm" type="button" target="_blank" data-toggle="tooltip" data-placement="top" title="FreeTimeLearn">Tutorials</button>
</p>
Output :
Tooltip Positioning

Use data-placement attribute to set the position of the tooltip on top, bottom, left or the right side of the element.

<button class="btn btn-primary btn-sm" type="button" target="_blank" data-toggle="tooltip" data-placement="top" title="HTML Tutorial">Top</button>

<button class="btn btn-primary btn-sm" type="button" target="_blank" data-toggle="tooltip" data-placement="right" title="CSS3 Tutorial">Right</button>

<button class="btn btn-primary btn-sm" type="button" target="_blank" data-toggle="tooltip" data-placement="bottom" title="Bootstrap 4 Tutorial">Bottom</button>

<button class="btn btn-primary btn-sm" type="button" target="_blank" data-toggle="tooltip" data-placement="left" title="JavaScript Tutorial">Left</button>
Output :
  Prev Page
Next Page