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 =
< script src =
</ script >
< script src =
</ script >
< script src =
</ 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 >
< 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 =
< script src =
</ script >
< script src =
</ script >
< script src =
</ 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 >
< 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 :
Bootstrap 5 Popovers Using function with popperConfig Options
Reference: https://getbootstrap.com/docs/5.0/components/popovers/#using-function-with-popperconfig
Share your thoughts in the comments
Please Login to comment...