<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>

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
html: true
})
})

$(document).on("click", ".popover .demo-close-button" , function(){
$('[data-bs-toggle="popover"]').popover("hide");
});

.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;
}