Bootstrap 5 Popovers update() Method
Last Updated :
21 Feb, 2023
Bootstrap5 Popovers update() method is used to re-calculate the position of the popover based on any changes in the content or size. It can be called on the popover instance to dynamically update its position, ensuring that it remains visible and properly aligned with the triggering element.
Syntax:
const popover = new bootstrap.Popover(element);
popover.update();
Parameter: This method accepts an HTML element or the selector of an element as its parameter.
Return Value: This method returns nothing other than the element popover getting updated by the method execution.
Example 1: The following example shows updating a Bootstrap 5 popover using HTML and jQuery. Here, we define the HTML code for the popover button with the GeeksforGeeks Content and GeeksforGeeks Title. We use jQuery to get a reference to the popover element with the “data-bs-toggle” attribute set to “popover”. We update the content and title of the popover by setting the “data-bs-content” set to “GeeksforGeeks New popover content” and “data-bs-title” set to “GeeksforGeeks New popover title” attributes of the element. Finally, we create a new instance of the Bootstrap Popover class and pass the popover element as an argument. We then call the “update” method of the popover instance to apply the updated content and title to the popover.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 5 Popover Update Method</title>
<link href=
rel="stylesheet">
<script src=
</script>
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="text-center" class="content">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2 class="text-success">
Bootstrap 5 Popovers update() Method
</h2>
<br>
<br>
<button type="button" class="btn btn-success"
data-bs-toggle="popover"
data-bs-content="GeeksforGeeks Content"
data-bs-title="GeeksforGeeks Title">
Click me
</button>
</div>
<script>
// Get the popover element
var popover = $('[data-bs-toggle="popover"]');
// Update the popover content and title
popover.attr('data-bs-content',
'GeeksforGeeks New popover content');
popover.attr('data-bs-title',
'GeeksforGeeks New popover title');
// Update the popover using Bootstrap's API
var popoverInstance = new bootstrap.Popover(popover[0]);
popoverInstance.update();
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 following example illustrates how to update a Bootstrap 5 popover’s content dynamically when a button is clicked. Here, we have added a button with the ID “update-popover” that, when clicked, updates the popover’s content with the new text “GeeksforGeeks New popover content”. We use jQuery to get a reference to the popover element, and then add a click event listener to the “update-popover” button. When the button is clicked, we update the “data-bs-content” attribute of the popover element with the new content, create a new instance of the Bootstrap Popover class, and call the “update” method to apply the updated content to the popover.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 5 Popover Update Method</title>
<link href=
rel="stylesheet">
<script src=
</script>
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="text-center">
<h1 class="text-success">GeeksforGeeks</h1>
<h2 class="text-success">
Bootstrap 5 Popovers update() Method
</h2>
<br>
<br>
<button type="button" class="btn btn-success"
data-bs-toggle="popover"
data-bs-content="GeeksforGeeks Initial content"
data-bs-title="GeeksforGeeks">
Click me
</button>
<button id="update-popover"
type="button"
class="btn btn-success">
Update popover
</button>
</div>
<script>
// Get the popover element
var popover = $('[data-bs-toggle="popover"]');
// Update the popover content when
// the update button is clicked
$('#update-popover').on('click', function () {
var newContent = 'GeeksforGeeks New popover content';
popover.attr('data-bs-content', newContent);
var popoverInstance = new bootstrap.Popover(popover[0]);
popoverInstance.update();
});
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:
Reference: https://getbootstrap.com/docs/5.0/components/popovers/#update
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...