Bootstrap 5 Tooltips enable() Method

Last Updated : 30 Nov, 2022

Bootstrap 5 Tooltips enable method. This method is used to enable a tooltip’s ability to be shown. It is enabled by default.

Syntax:

tooltip.enable()

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

Let us understand more about this using some examples below:

Example 1: In this example, we will create Bootstrap 5 Tooltips and call enable on the tooltip which is positioned to appear on the top of the button. You will notice that there is no difference between the 2 tooltips as both of them are enabled by default.

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>Bootstrap5-Tooltips</title> 
    <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 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.enable() 
            } 
            return tooltip; 
        }) 
    </script> 
</body> 
</html>

Output:

Example 2: In this example, we will create Bootstrap 5 Tooltips and call enable on the first one and disable on the other. The enable one will allow the user to toggle the tooltip’s visibility on hover, while the disabled one will not allow the user to toggle its visibility.

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>Bootstrap5-Tooltip</title> 
    <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 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.enable() 
            } else { 
                tooltip.disable() 
            } 
            return tooltip; 
        }) 
    </script> 
</body> 
</html>