Bootstrap 5 Popovers Disabled Elements

Last Updated : 15 Feb, 2023

Bootstrap 5 Popovers are an amazing way to show some quick information when hovered over a button or anchor or span tag. In popovers, there exists an option to disable the popover element. Disabling the element essentially means that the popover won’t work anymore. The disabling is mainly done using the disabled attribute addition and it works on either popover made with buttons or span tags and not with anchor tags.

Bootstrap 5 Popovers Disabled elements attributes:

disabled: This attribute is added to the popover and this disables the popover from operating.
data-bs-trigger: This attribute is used for disabled popover triggers, in order to popover appear as immediate visual feedback to the user.

Syntax:

<span data-bs-toggle="popover" 
      data-bs-trigger="hover focus" 
      data-bs-content="...">
    <button class="btn" 
            type="button" disabled>
            ...
    </button>
</span>

Example 1: The code demonstrates how the popovers with span tags and popovers with buttons behave differently when disabled.

HTML

<!doctype html> 
<html lang="en"> 
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"> 
    </script> 
</head> 
<body> 
    <h1 class="m-4 text-success">GeeksforGeeks</h1> 
    <h4 class="ms-4"> 
        Bootstrap 5 Popovers Disabled elements 
    </h4> 
    <div class="container mb-4 p-4"> 
        <button type="button" class="btn btn-lg btn-danger w-10" 
            data-bs-toggle="popover" title="Popover title" 
            data-bs-content="This is a button as an disabled popover"
            disabled> 
            Disabled popover button 
        </button> 
    </div> 
    <div class="container mt-4 p-4"> 
        <span class="d-inline-block" tabindex="0" 
            data-bs-toggle="popover" data-bs-trigger="hover focus"
            data-bs-content="This is an span tag as an disabled popover"> 
            <button class="btn btn-danger" type="button"
                disabled> 
                Disabled popover span button 
            </button> 
        </span> 
    </div> 
    <script> 
        var popoverTriggerList =  
            [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) 
        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { 
            return new bootstrap.Popover(popoverTriggerEl) 
        }) 
    </script> 
</body> 
</html>

Output:

Example 2: The code demonstrates how the disabled popovers can give out floating information about the popovers in different directions.

HTML

<!doctype html> 
<html lang="en"> 
<head> 
     <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"> 
    </script> 
</head> 
<body> 
    <h1 class="m-4 text-success">GeeksforGeeks</h1> 
    <h4 class="ms-4"> 
        Bootstrap 5 Popovers Disabled elements</h4> 
    <div class="container mt-4 p-4"> 
        <span class="d-inline-block" tabindex="0" data-bs-toggle="popover" 
            data-bs-trigger="hover focus" data-bs-placement="top" 
            data-bs-content= 
            "This is an span tag as an disabled popover on the top"> 
            <button class="btn btn-success" type="button" 
                disabled> 
                Disabled popover span with top popover 
            </button> 
        </span> 
        <span class="d-inline-block" tabindex="0" data-bs-toggle="popover" 
            data-bs-trigger="hover focus" data-bs-placement="bottom" 
            data-bs-content= 
            "This is an span tag as an disabled popover on the bottom"> 
            <button class="btn btn-secondary" type="button" 
                disabled> 
                Disabled popover span with bottom popover 
            </button> 
        </span> 
    </div> 
    <script> 
       var popoverTriggerList =  
       [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) 
       var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { 
         return new bootstrap.Popover(popoverTriggerEl) 
       }) 
    </script> 
</body> 
</html>