Live Demo: Creating Custom Template for Bootstrap Popovers Using JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Creating Custom Template for Bootstrap Popovers Using JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
	.bs-example{
    	margin: 150px 50px;
    }
    /* Styles for custom popover template */
    .popover-footer{
        padding: 6px 14px;
        background-color: #f7f7f7;
        border-top: 1px solid #ebebeb;
        text-align: right;
    }
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
    var popoverList = popoverTriggerList.map(function(element){
        return new bootstrap.Popover(element, {
        	template: '<div class="popover"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div><div class="popover-footer"><a class="btn btn-secondary btn-sm close">Close</a></div></div>'
    	});
 	});
});
  
// Close popover on button click
document.addEventListener("click", function(e){
    if(e.target && e.target.classList.contains("close")){
        var popover = bootstrap.Popover.getInstance(e.target.closest(".popover"));
        popover.hide();
    }
});
</script>
</head>
<body>
<div class="bs-example">
    <p>
        <button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Custom Popover Template" data-bs-content="This is an example of a custom Bootstrap popover.">Popover</button>
        <button type="button" class="btn btn-secondary ms-2" data-bs-toggle="popover" title="Custom Popover Template" data-bs-content="This is another example of a custom Bootstrap popover.">Another Popover</button>
    </p>
    <p><strong>Note:</strong> This is a simple example of customized Bootstrap popover that displays a footer with close button without adding any extra markup to the popover HTML.</p>
    <p>Click on the buttons to show/hide the popover.</p>
</div>
</body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Creating Custom Template for Bootstrap Popovers Using JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 150px 50px;
    }
    /* Styles for custom popover template */
    .popover-footer{
        padding: 6px 14px;
        background-color: #f7f7f7;
        border-top: 1px solid #ebebeb;
        text-align: right;
    }
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
    var popoverList = popoverTriggerList.map(function(element){
        return new bootstrap.Popover(element, {
            template: '<div class="popover"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div><div class="popover-footer"><a class="btn btn-secondary btn-sm close">Close</a></div></div>'
        });
    });
});
  
// Close popover on button click
document.addEventListener("click", function(e){
    if(e.target && e.target.classList.contains("close")){
        var popover = bootstrap.Popover.getInstance(e.target.closest(".popover"));
        popover.hide();
    }
});
</script>
</head>
<body>
<div class="bs-example">