Bootstrap 5 Popovers Using function with popperConfig Options
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" >w3wiki</ 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:
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" >w3wiki</ 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
Contact Us