Bootstrap 5 Popovers update() Method
Last Updated :
01 Aug, 2024
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>
<!-- Add the Bootstrap CSS and JS files -->
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<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://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js">
</script>
</head>
<body>
<!-- HTML code for the popover -->
<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>
<!-- jQuery code to update the popover -->
<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>
<!-- Add the Bootstrap CSS and JS files -->
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<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://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js">
</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>
<!-- HTML code for the popover -->
<button type="button" class="btn btn-success"
data-bs-toggle="popover"
data-bs-content="GeeksforGeeks Initial content"
data-bs-title="GeeksforGeeks">
Click me
</button>
<!-- HTML code for the button that updates
the popover content -->
<button id="update-popover"
type="button"
class="btn btn-success">
Update popover
</button>
</div>
<!-- jQuery code to update the popover content -->
<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
Similar Reads
Bootstrap 5 Popovers Bootstrap 5 Popovers Provides directional placement options (top, bottom, left, right), dismiss on click, and support for disabled elements. Styled with Sass, they feature various methods, options, and events for dynamic interaction and customization. Bootstrap 5 Popovers: AspectDescriptionFour dire
2 min read
Bootstrap 5 Popovers Four directions The popover is a bootstrap component used to mainly add additional information to a website. It is a pop-up box that appears when the user clicks on an element. Using bootstrap attributes, It can be aligned in any of the four directions left, top, right, and bottom. Bootstrap 5 Popovers Four directi
3 min read
Bootstrap 5 Popovers Dismiss on next click The popover is an attribute of bootstrap used to make the website look more effective. Popovers are mainly used to display additional information and are displayed with the click of the mouse pointer on a button. Popovers can be dismissed on the user’s next click of a different element than the togg
2 min read
Bootstrap 5 Popovers Disabled Elements Bootstrap 5 Popovers are an amazing way to show some quick information when hovered over a button or anchor or span tag. In popovers, there exists an option to disable the popover element. Disabling the element essentially means that the popover won't work anymore. The disabling is mainly done using
2 min read
Bootstrap 5 Popovers SASS Bootstrap 5 Popovers SASS has a set of variables that are usually set to a default value but it can be changed accordingly to customize the Popover.SASS variable of Popovers: SASS variables and their default values:$popover-font-size ($font-size-sm): This variable is used to change the font size of
5 min read
Bootstrap 5 Popovers Usage Bootstrap 5 popover is similar to the tooltips which have a pop-up box that appears when we click the element. We can insert the content into the popover box by using the attribute called "data-bs-content". We can also include interactive controls. Bootstrap 5 Popovers Usage Events: Options: Options
2 min read
Bootstrap 5 Popovers Options Bootstrap 5 Popovers are small overlays that can be displayed on top of content to provide additional context or action options. Popover option are used to perform the specific function on the element. Options can be passed through the data attributes or java script. To pass the data attributes we S
3 min read
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 popperCo
2 min read
Bootstrap 5 Popovers Methods Bootstrap 5 Popovers methods enable manual control over the visibility of popover elements, allowing users to show or hide them as needed, enhancing interactivity and customization options within web applications.Bootstrap 5 Popovers Methods:MethodDescriptiontoggleToggles the visibility of a popover
2 min read
Bootstrap 5 Popovers show() Method Bootstrap 5 Popovers show() method is used to open the popover manually. It will show the popover before the actual shown.bs.popover event occurs. Syntax: popover.show() Return value: This method will manually trigger the element’s popover to be displayed. Example 1: In this example, we will learn a
2 min read