Basically, Bootstrap 4 tooltips are a small popup box that display information whenever use moves the mouse pointer to the element such as link or button.
Bootstrap tooltip is used to display information when users hover, focus, or tap an element.
To create bootstrap tooltip,follow the following steps.
data-toggle="tooltip"
attribute to an element such as link or button.
title="Write Your Information"
attribute to an element such as link or button and write your information within title attribute.This title message will be display in-front of the user after placing mouse pointer to the element.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
General Syntax
<a href="#" data-toggle="tooltip" title="Learn Bootstrap">Hover over me</a>
Source Code
<div class="container my-2">
<a href="#" data-toggle="tooltip" title="Learn Bootstrap">Hover over me </a>
</div>
Try it yourself
Note: In the above example, the tooltip is initialized with the bootstrap tooltip method using jquery.
Use data-placement
attribute to change tooltip direction like top, bottom, left or the right side of the element.
General Syntax
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">
<span class="badge badge-success p-2">Top Tooltip</badge>
</a>
Source Code
<div class="container my-2">
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">
<span class="badge badge-success p-2">Top Tooltip</badge>
</a>
</div>
Try it yourself
Note:
In the above example data attribute data-placement
is used to provide tooltip direction.