ootstrap Popover with HTML Content and a close button

About Albanians

Albanians are descendants of the ancient Illyrians, who lived in central Europe and migrated southward to the territory of Albania at the beginning of the Bronze Age, about 2000 BCE.

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

Bootstrap

Popover with HTML Content and a close button

About Albanians