What is a tooltip and how to create it in Bootstrap ?

Last Updated : 21 Oct, 2021

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:

Step 1: First import all the Bootstrap CDN for Bootstrap CSS and JavaScript from the Bootstrap official website.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 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.

HTML

<button type="button" 
        class=" tooltip btn btn-secondary"
        data-bs-toggle="tooltip" 
        data-bs-placement="top"
        title="Tooltip on top">
  Tooltip on top
</button>

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 3: Add the JavaScript piece of code to the HTML file given below. We use the Tooltip() function to make the tooltip trigger on mouse hover. We have used the forEach() loop to add the tooltip options to all the objects having the tooltip. You may also add the tooltip to each individual object in the HTML file.

JavaScript

<script>
    const tooltips = document.querySelectorAll(".tooltip");
    tooltips.forEach(t => {
        new bootstrap.Tooltip(t);
    });
</script>

Step 4: We have successfully created the tooltip in Bootstrap.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
  
    <!-- Bootstrap CSS -->
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity=
"sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" 
           crossorigin="anonymous">
</head>

<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <br>
    <button type="button" 
            class="tool btn btn-secondary" 
            data-bs-toggle="tooltip" 
            data-bs-placement="top" 
            title="Tooltip on top">
        Tooltip on top
    </button>
    <button type="button" 
            class="tool btn btn-secondary" 
            data-bs-toggle="tooltip" 
            data-bs-placement="right"
            title="Tooltip on right">
        Tooltip on right
    </button>
    <button type="button" 
            class="tool btn btn-secondary" 
            data-bs-toggle="tooltip" 
            data-bs-placement="bottom" 
            title="Tooltip on bottom">
        Tooltip on bottom
    </button>
    <button type="button" 
            class="tool btn btn-secondary" 
            data-bs-toggle="tooltip" 
            data-bs-placement="left" 
            title="Tooltip on left">
        Tooltip on left
    </button>
    <!-- Bootstrap JavaScript -->
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" 
            crossorigin="anonymous">
    </script>
    <script>
        const tooltips = document.querySelectorAll(".tool");
        tooltips.forEach(t => {
            new bootstrap.Tooltip(t);
        });
    </script>
</body>
</html>