Bootstrap 4 Tooltip

Bootstrap Tooltip plugin is small pop-up box that appears when the user hover the mouse pointer over an element.

<button class="btn btn-success" data-toggle="tooltip" title="Hi! I am a Button">Hover Me</button>
<a data-toggle="tooltip" title="Hi, I am a anchor tag">Hover Me Again!</a>

• Tooltips must be initialized with jQuery.

jQuery code to initialize ToolTip

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});
</script>

Positioning Tooltips

By default, the tooltip will appear on top of the element. Use data-placement="left" attribute to set the position of the tooltip. Value can be top(default), bottom, left and right.

<a data-toggle="tooltip" data-placement="left" title="I will appear in left">Left Tooltip</a> 
<a data-toggle="tooltip" data-placement="right" title="I will appear in right">Right Tooltip</a> 
<a data-toggle="tooltip" data-placement="bottom" title="I will appear in bottom">Bottom Tooltip</a> 
<a data-toggle="tooltip" data-placement="top" title="I will appear in top">Top Tooltip</a>

Tooltip Options

Name	Description
Delay	Specifies the number of milliseconds it will take to show and hide the tooltip.
trigger	Specifies how the tooltip is triggered.

Delay Syntax

$('.delay1').tooltip({title: "Tooltip with 1 Second delay", delay: 1000}); 
$('.delay2').tooltip({title: "Tooltip with hide/show", delay: {show: 1000, hide: 100}});

Trigger Syntax

$('.trigger1').tooltip({title: "Click Me!", trigger: "click"}); 
$('.trigger2').tooltip({title: "Hover Me!", trigger: "hover"}); 
$('.trigger3').tooltip({title: "Focus Me!", trigger: "focus"});