Explain Bootstrap Tooltip

Last Updated : 16 Jun, 2023

In Bootstrap Framework, Tooltip is a plugin that displays a small pop-up box when the user hovers the mouse pointer over an element. For example, when a user points over a link or buttons, etc. a small pop-up with a hint or information about the element is being hovered. This Tooltip Plugin is generally used when we want to display the purpose of each component on the webpage, just by moving the mouse pointer over the component.

To implement the tooltip, we need to add the data-toggle=”tooltip” attribute to an element, and the title attribute is used to display text on hover. We must initialize Tooltip to trigger, Tooltips via JavaScript by using the tooltip() method that specifies the id, class, or any CSS selector of the target element in the JavaScript code. In this article, we will learn about the tooltip in Bootstrap along with its configuration & implementation. Please refer to the Bootstrap 4 | Tooltip article for further details.

Step to setup Bootstrap tooltip plugin:

Include Bootstrap and jQuery CDN into the <head> tag –

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script>

Add Tooltip Markup in HTML element –

<a href="#" data-toggle="tooltip" 
    title="Some Information or Hint">
    Hover over me
</a>

Add jQuery to the <script> tag to Trigger the Tooltips –

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

Positioning Tooltips (optional) –

By default, the Bootstrap tooltip plugin will always appear on top of the element. But we can use a data-placement attribute to change the position of the tooltip plugin so that we can position the tooltip on the top, bottom, left, or right side of the element.

<a href="#" data-toggle="tooltip" 
    data-placement="top" 
    title="Tooltip on top">
    Tooltip on top
</a>

<a href="#" data-toggle="tooltip" 
    data-placement="bottom" 
    title="Tooltip on bottom">
    Tooltip on bottom
</a>

<a href="#" data-toggle="tooltip" 
    data-placement="left" 
    title="Tooltip on left">
    Tooltip on left
</a>

<a href="#" data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right">
    Tooltip on right
</a>

We can also position Tooltips via JavaScript:

<script>
    $(document).ready(function () {

        //.tooltip-**** is the class 
        // specified in the html element
        $(".tooltip-top").tooltip({ placement: "top" });
        $(".tooltip-right").tooltip({ placement: "right" });
        $(".tooltip-bottom").tooltip({ placement: "bottom" });
        $(".tooltip-left").tooltip({ placement: "left" });
    });
</script>

At this stage, we have successfully configured the tooltip to start work on it.

Example: In this example, we will create a Bootstrap tooltip.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Bootstrap Tooltip Example</title>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1" />
    <link rel="stylesheet"
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
</head>
 
<body>
    <div class="container">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h5>Bootstrap Tooltip Example</h5>
        <br />
        <a href="#"
           data-toggle="mytooltip"
           title="A Computer Science portal for geeks">
            Hover me
        </a>
    </div>
    <script>
        // Add below code to trigger tooltip
        $(document).ready(function () {
            $('[data-toggle="mytooltip"]').tooltip();
        });
    </script>
</body>
 
</html>