Bootstrap 5 Tooltips toggleEnabled() Method

Last Updated : 22 Jul, 2024

A tooltip is a UI element that is used to show some extra information when the user hovers over or focuses on a tooltip-enabled element.

The toggleEnabled() method of the tooltip toggles the enabled/disabled state of the tooltip. When in the "disabled" state, the tooltip cannot be shown or hidden.

Syntax:

const tooltip = new bootstrap.Tooltip(
    document.getElementById('tooltip-id'));
tooltip.toggleEnabled();

Parameters: This method does not accept any parameter.

Return Value: This method does not return any value to the caller.

Example 1: In this example, we used the toggleEnabled() method of the tooltip to enable/disable the tooltip.

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>

    <!-- Bootstrap 5 - JavaScript -->
    <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>
    <!-- Bootstrap 5 - CSS -->
    <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="mt-5">
            <h3 class="text-success">GeeksforGeeks</h3>
            <h4>Bootstrap 5 Tooltips toggleEnabled() Method</h4>
        </div>

        <button class="btn btn-danger mb-5" onclick="toggle()">
            Tooltip toggleEnable
        </button>

        <a id="tt" class="btn d-block mb-4" href="#" 
           data-bs-toggle="tooltip" 
           data-bs-title="Welcome to GeeksforGeeks">
            Hover for Tooltip
        </a>
        <h4>Is Tooltip Enabled:
            <span id="status">
                YES
            </span>
        </h4>

        <script>
            const mytt = document.getElementById('tt');
            const tooltip = new bootstrap.Tooltip(mytt);

            function toggle() {
                var status = document.getElementById('status');
                tooltip.toggleEnabled();
                if (status.innerText == "YES") {
                    status.innerText = "NO";
                }
                else {
                    status.innerText = "YES";
                }
            }
        </script>
    </div>
</body>

</html>

Output:

Example 2: In this example, we used the toggleEnabled() method of the tooltip along with its enable() and disable() methods.

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>

    <!-- Bootstrap 5 - JavaScript -->
    <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>
    <!-- Bootstrap 5 - CSS -->
    <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 Tooltips toggleEnabled() Method</h4>
        </div>

        <button class="btn btn-warning mb-5" onclick="toggle()">
            Toggle Tooltip Staus
        </button>

        <button class="btn btn-success mb-5" onclick="enableTooltip()">
            Enable Tooltip
        </button>

        <button class="btn btn-danger mb-5" onclick="disableTooltip()">
            Disable Tooltip
        </button>

        <a id="tt" class="btn d-block mb-4" 
           href="#" data-bs-toggle="tooltip" 
           data-bs-title="Welcome to GeeksforGeeks">
            Hover for Tooltip
        </a>
        <h4>Status: <span id="status">Enabled</span></h4>

        <script>
            const mytt = document.getElementById('tt');
            const tooltip = new bootstrap.Tooltip(mytt);
            let status = document.getElementById('status');

            function toggle() {
                tooltip.toggleEnabled();
                if (status.innerText == "Enabled") {
                    status.innerText = "Disabled";
                }
                else {
                    status.innerText = "Enabled";
                }
            }
            function enableTooltip() {
                if (status.innerText == "Disabled") {
                    tooltip.enable();
                    status.innerText = "Enabled";
                }
            }
            function disableTooltip() {
                if (status.innerText == "Enabled") {
                    tooltip.disable();
                    status.innerText = "Disabled";
                }
            }
        </script>
    </div>
</body>

</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/components/tooltips/#toggleenabled

Bootstrap 5 Tooltips update() Method

vpsop

Improve

Article Tags :

Bootstrap 5 Tooltips toggleEnabled() Method

Similar Reads

Thank You!

What kind of Experience do you want to share?