Bootstrap 5 Popovers update() Method

Bootstrap5Popoversupdate() 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.

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.

Output:

Reference: https://getbootstrap.com/docs/5.0/components/popovers/#update