Dùng javascript để tạo mẫu cho popovers
<!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>
Xem ví dụ
