Bootstrap 5 Popovers Using function with popperConfig Options

Last Updated : 09 Jan, 2023

Bootstrap 5 Popover is a feature of Bootstrap that allow you to display a small popup over the element when an element is clicked or hovered over.

Bootstrap 5 Popovers Using function with popperConfig Options: Popover popperConfig option is used to customize the behavior of the popover. The popperConfig option is an object that contains a set of options and modifiers that control the placement and behavior of the popover.

Syntax :

var popover = new bootstrap.Popover(element, {
    popperConfig: function (defaultBsPopperConfig) {
    }
})

Example 1: In this example, we place the popover on the right of element by using the popperConfig option.

HTML

<!DOCTYPE html> 
<html> 
<head> 
        
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"> 
    </script> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> 
    </script> 
</head> 
<body class="text-center"> 
    <br> 
    <br> 
    <h1 class="text-success">GeeksforGeeks</h1> 
    <h3>Popovers with popperConfig Options</h3> 
    <button id="btn-popover" type="button" class="btn btn-primary" 
            data-toggle="popover" title="Popover Title" 
            data-content="Popover content"> 
            Toggle Popover 
    </button> 
  
    <!-- Initialize the popover with popperConfig options -->
    <script type="text/javascript"> 
        $(document).ready(function() { 
            $('#btn-popover').popover({ 
              popperConfig: { 
                placement: 'right', 
                modifiers: { 
                    preventOverflow: { 
                        enabled: true, 
                        boundariesElement: 'window' 
                    } 
                } 
              } 
            }); 
        }); 
    </script> 
</body> 
</html> 

Output:

Bootstrap 5 Popovers Using function with popperConfig Options

Example 2: In this example, we will pass various popover options using the popperConfig option.

HTML

<!DOCTYPE html> 
<html> 
<head> 
        
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"> 
    </script> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> 
    </script> 
</head> 
<body class="text-center"> 
    <br> 
    <br> 
    <h1 class="text-success">GeeksforGeeks</h1> 
    <h3>Popovers with popperConfig Options</h3> 
    <button id="btn-popover" type="button" class="btn btn-primary" 
            data-toggle="popover" title="Popover Title" 
            data-content="Popover content"> 
            Toggle Popover 
    </button> 
  
    <!-- Initialize the popover with popperConfig options -->
    <script type="text/javascript"> 
        $(document).ready(function() { 
            $('#btn-popover').popover({ 
               popperConfig: { 
                    placement: 'bottom', 
                    modifiers: { 
  
                        delay: { 
                            delay: { "show": 500, "hide": 100 } 
                        }, 
                        offset: { 
                            offset: '0,10' 
                        }, 
                        preventOverflow: { 
                            boundariesElement: 'viewport' 
                        }, 
                        flip: { 
                            behavior: 'flip' 
                        }, 
                        arrow: { 
                            element: '.arrow' 
                        } 
                    }, 
                    eventsEnabled: true, 
                    positionFixed: false 
                } 
            }); 
        }); 
    </script> 
 </body> 
</html> 