Bootstrap 5 Tooltips toggleEnabled() Method

Last Updated : 16 Dec, 2022

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/core@2.11.6/dist/umd/popper.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"> 
    </script> 
    <!-- Bootstrap 5 - CSS -->
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/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/core@2.11.6/dist/umd/popper.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"> 
    </script> 
    <!-- Bootstrap 5 - CSS -->
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/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>