Bootstrap 5 Enable Tooltips Everywhere

Last Updated : 05 Aug, 2024

Bootstrap 5 Tooltips can be enabled everywhere by first creating a list of all the tooltips and then enabling each of them. All the tooltips have an attribute named "data-bs-toggle" set to "tooltip". This attribute can be used to select all the tooltips using the document.querySelectorAll() method.

Bootstrap 5 Enable Tooltips Everywhere Classes: There are no specific classes for enabling tooltips everywhere in Bootstrap 5. Here we will select all the tooltip elements using the data-bs-toggle attribute and then create an instance of the tooltip for each of them.

Syntax:

let tooltipelements = document.querySelectorAll("[data-bs-toggle='tooltip']");
tooltipelements.forEach((el) => {
    new bootstrap.Tooltip(el);
});

Example 1: In this example, we have only one tooltip and we will enable it by selecting it directly using the id attribute.

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">
    <title>GFG - Bootstrap 5 Enable Tooltips Everywhere</title>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet"/>
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
    </script>
    
</head>
<body>
    <div class="container text-center">
        <div class="my-4">
            <h3 class="text-success">
                GeeksforGeeks
            </h3>
            <h4>
                Bootstrap 5 Enable Tooltips Everywhere
            </h4>
        </div>

        <button 
            class="btn btn-warning mb-5" 
            onclick="enableTooltip()">
            Enable The tooltip
        </button>
        <br>
        <button
            id="tt" 
            class="btn btn-secondary" 
            data-bs-toggle="tooltip" 
            data-bs-title="Welcome to GeeksforGeeks">
            Hover for Tooltip
        </button>

        <script>
            function enableTooltip()
            {
                let element = document.getElementById("tt");
                new bootstrap.Tooltip(element);
            }
        </script>
    </div>
</body>
</html>

Output:

Example 2: In this example, we enabled all three tooltips in one go using the syntax provided above.

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">
    <title>GFG - Bootstrap 5</title>
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
    </script>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet"/>
</head>
<body>
    <div class="container text-center">
        <div class="my-4">
            <h3 class="text-success">
                GeeksforGeeks
            </h3>
            <h4>
                Bootstrap 5 Enable Tooltips Everywhere
            </h4>
        </div>

        <button 
            class="btn btn-warning mb-5" 
            onclick="enableAllTooltips()">
            Enable All Tooltips
        </button>

        <br>

        <a 
            class="btn d-inline-block mb-4" 
            data-bs-toggle="tooltip" 
            data-bs-title="Tooltip 1">
            Tooltip 1
        </a>

        <a 
            class="btn d-inline-block mb-4" 
            data-bs-toggle="tooltip" 
            data-bs-title="Tooltip 2">
            Tooltip 2
        </a>

        <a 
            class="btn d-inline-block mb-4" 
            data-bs-toggle="tooltip" 
            data-bs-title="Tooltip 3">
            Tooltip 3
        </a>

        <script>
            function enableAllTooltips()
            {
                let tooltipelements = 
                    document.querySelectorAll("[data-bs-toggle='tooltip']");
                tooltipelements.forEach((el) => {
                    new bootstrap.Tooltip(el);
                });
            }
        </script>
    </div>
</body>
</html>