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/[email protected]/dist/css/bootstrap.min.css">     <script src= "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">     </script>     <script src= "https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/css/bootstrap.min.css">     <script src= "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">     </script>     <script src= "https://cdn.jsdelivr.net/npm/[email protected]/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>

Output :

Reference: https://getbootstrap.com/docs/5.0/components/popovers/#using-function-with-popperconfig

Bootstrap 5 Popovers Methods

jayadeepreddypeddireddy

Improve

Article Tags :

Bootstrap 5 Popovers Using function with popperConfig Options

Similar Reads