HTML
<span data-bs-toggle="popover" title="Illyrians <span class='demo-close-button'><i class='fa-solid fa-circle-xmark'></i></span>" data-html="true" data-bs-trigger="click" data-bs-content="<p>Popover content with <strong>HTML</strong>.</p>">open modal</span>
JS (open popup)
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
html: true
})
})
JS (close popup)
$(document).on("click", ".popover .demo-close-button" , function(){
$('[data-bs-toggle="popover"]').popover("hide");
});
CSS
.demo-btn-close {
position: relative;
width: 90px;
padding: 4px 6px;
margin-bottom: 10px;
text-align: left;
font-size: 11px;
letter-spacing: 1px;
}
.demo-btn-close-label {
position: absolute;
top: 0;
right: 0;
display: inline-block;
padding: 4px 6px;
background: rgba(0, 0, 0, 0.15);
border-radius: 0 3px 3px 0;
}
