Bootstrap 5 Tooltips disable() Method

Last Updated : 07 Dec, 2022

Bootstrap 5 Tooltips disable() method is used to remove a tooltip’s ability to be visible, manually. After using this method, the user won’t be able to see the tooltip at all.

Syntax:

tooltip.disable()

Return Value: This method gives the tooltip the ability to be hidden.

Let us understand more about this using some examples below:

Example 1: In this example, we will create Bootstrap 5 Tooltips and call disable on the tooltip which is positioned to appear on the top of the button. Calling disable method will vanquish the tooltip’s ability to be seen.

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"> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity= 
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
    <h1 class="text-success">GeeksforGeeks</h1> 
    <button id="tooltip-a" type="button" 
            class="btn btn-secondary" 
            data-bs-toggle="tooltip" 
            data-bs-placement="top"
            title="Tooltip on top"> 
            Tooltip on top 
    </button> 
    <button type="button" class="btn btn-secondary" 
            data-bs-toggle="tooltip" data-bs-placement="right"
            title="Tooltip on right"> 
            Tooltip on right 
    </button> 
  
    <script> 
        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) 
        const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { 
            const tooltip = new bootstrap.Tooltip(tooltipTriggerEl) 
            if (tooltipTriggerEl.innerText?.includes('top')) { 
                tooltip.disable() 
            } 
            return tooltip; 
        }) 
    </script> 
</body> 
  
</html>

Output:

Example 2: In this example, we will create Bootstrap 5 Tooltips and call disable on all of the tooltips. Calling disable method will vanquish the tooltip’s ability to be seen.

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"> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity= 
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
    <h1 class="text-success">GeeksforGeeks</h1> 
    <button id="tooltip-a" type="button" 
            class="btn btn-secondary" 
            data-bs-toggle="tooltip" 
            data-bs-placement="top"
            title="Tooltip on top"> 
            Tooltip on top 
    </button> 
    <button type="button" class="btn btn-secondary" 
            data-bs-toggle="tooltip" 
            data-bs-placement="right"
            title="Tooltip on right"> 
            Tooltip on right 
    </button> 
  
    <script> 
        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) 
        const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { 
            const tooltip = new bootstrap.Tooltip(tooltipTriggerEl) 
            tooltip.disable() 
            return tooltip; 
        }) 
    </script> 
</body> 
  
</html>