How to create Tooltip with Bootstrap 4

Today we going to see about what is tooltip and various kinds of tooltip and how to utilize it.

What is ToolTip?

It is a Hint or Message shows up when you hover(move) your over a picture, symbol, button, link(href), or some other components.

Why ToolTip?

It provides us supplemental information about that icon or image or some other components.

How to create a ToolTip?

To create a ToolTip you have to add data-toggle type as the “tooltip” to an element. And initialize the ToolTip with jquery.

data-toggle=”tooltip”

Now, You have added the ToolTip to the element.

Next, You have to add what we should Display in that ToolTip using the “title”.

data-toggle=”tooltip” title=”welcome to my blog”

Javascript

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

You can add it inside the HTML document using <script></script> or else you can add it in separate .js file and link it in HTML document.

This is how Tooltip is added.

Positioning Tooltips

When You add a ToolTip to an element it’ll appear top by default.we can change the appearance by adding “Data-placement”.

data-placement=”top”

data-placement=”right”

data-placement=”left”

data-placement=”bottom”

ToolTip Data-placement Options

DELAY

What does this do?

It makes Tooltip information to display after some time that we set [for example 1000 ms, 500 ms].we can achieve this using jquery.

ToolTip Methods

You can make the tooltip show or hide using jquery.

$(“[data-toggle=’tooltip’]”).tooltip(‘show’); this makes ToolTip visible when user hover on it.

$(“[data-toggle=’tooltip’]”).tooltip(‘hide’); this makes ToolTip invisible when user hover on it.

If anything is not clear or you want to point out something, please reach me

Like this article? Follow @saravanan.vijayamuthu on Instagram

My Website → https://saravananvijayamuthu.herokuapp.com/

Weather app → https://gadot.vercel.app/

Github → https://github.com/SaravananVijayamuthu

Little Occult Affairs → https://www.amazon.in/dp/8194619920/ref=cm_sw_r_cp_apa_i_GEHnFbXWYB45D