What is a tooltip and how to create it in Bootstrap ?
A Tooltip is like a balloon or also a small screen tip that displays text description to any object. A tooltip is displayed when the user hovers over an object using the cursor. It is a very useful part of a website and now can be found in almost all websites including some web applications like Adobe Photoshop, Adobe Illustrator, and many more. A tooltip is very helpful for new users, where the user can learn about the object by reading the tooltip text.
Now, having understood the basic concept of the tooltip, let’s learn how to create a tooltip using the Bootstrap framework.
Creating a Tooltip in Bootstrap:
<link href=”https://firstname.lastname@example.org/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU” crossorigin=”anonymous”>
<script src=”https://email@example.com/dist/js/bootstrap.bundle.min.js” integrity=”sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ” crossorigin=”anonymous”>
Step 2: To create a tooltip, we have to add the ‘data-bs-toggle’ attribute to any element, and to add the text that needs to be displayed when the tooltip hovers, we have to add the ‘title’ attribute to the HTML element. We can also define the direction of the tooltip message in different directions like bottom, top, left, right, etc. To align the tooltip to different positions, we need the ‘data-bs-placement’ attribute to the bootstrap object.
We have used buttons to show the tooltips effect, but, you can use tooltips with other bootstrap components too. The process is very same.
Step 4: We have successfully created the tooltip in Bootstrap.
Note: We have shown the example with the button component, you can apply it to other components like Paragraphs, icons too.