Bootstrap 5 Tooltips disable() Method

Last Updated : 25 Jun, 2026

Bootstrap 5 provides several methods to manage tooltip behavior programmatically. The disable() method is used to deactivate a tooltip, preventing it from being displayed when users interact with the associated element.

  • Disables an active tooltip instance.
  • Prevents the tooltip from being shown.
  • The tooltip can be reactivated using the enable() method.

Syntax:

tooltip.disable()

where, disable() is a method that disables the tooltip, preventing it from being displayed.

Return Value: This method does not return any value.

Note: The disable() method prevents a tooltip from being displayed in future interactions, but it does not hide a tooltip that is already visible. Use the hide() method to immediately hide a visible tooltip.

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 the disable() method on the top tooltip prevents it from being displayed when users hover over or focus on the button.

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.getAttribute('data-bs-placement') === '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 the disable() method on all tooltip instances prevents any of the tooltips from being displayed.

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>


Output:

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

Comment

Explore