Bootstrap 4 Tooltips
Bootstrap 4 tooltips are a small popup box that display information whenever use moves the mouce pointer to the element such as link or button.
To create bootstrap 4 tooltips, follow the following steps.
-
Place
data-toggle="tooltip"attribute to an element such as link or button. -
Place
title="Write Your Information"attribute to an element such as a link or button and write your information within the title attribute. This title message will be displayed in front of the user after placing the mouse pointer to the element. -
Initialize bootstrap tooltip by jQuery through selecting link or button.
Tooltip Initialization
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
Example
General Syntax
<a href="#" data-toggle="tooltip" title="Learn Bootstrap 4 Step By Step">Hover over me </a>
Source Code
<div class="container text-center mt-4">
<B class="text-center">Bootstrap 4 Tooltip</B>
<a href="#" data-toggle="tooltip" title="Learn Bootstrap">Hover over me </a>
</div>
Source Code: Output
Note:In the above example, the tooltip is initialized with the bootstrap tooltip method using jquery.
Bootstrap tooltip is used to display information when users hover, focus, or tap an element.
Bootstrap 4 Tooltips: Directions
Use data-placement attribute to change tooltip direction like top, bottom, left or the right side of the element.
Example
General Syntax
<a href="#" data-toggle="tooltip" data-placement="left | right" title="Hooray!">
<span class="badge badge-success p-2">Tooltip Position</span>
</a>
Source Code
<div class="container mt-4">
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">
<span class="badge badge-success p-2">Left Tooltip</span>
</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">
<span class="badge badge-info p-2">Right Tooltip</span>
</a>
</div>
Source Code: Output
In the above example data attribute data-placement is used to provide tooltip direction.
Web Tutorials
