Open In App

Bootstrap 5 Tooltips disable() Method

Last Updated : 07 Dec, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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=
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script src=
            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=
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script src=
        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>


Output:

 

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



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments