Popovers

This is a dimissible popover that doesn't disappear when users copy / interact with the popover

The button/link that triggers the popover must have a unique "id" attribute

HTML
You must initialize this with this javascript: 
window.addEventListener('load', () => {
  const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
  popoverTriggerList.forEach((popoverTriggerEl) => {
      let popover = new bootstrap.Popover(popoverTriggerEl, {
        template: `<div class="popover" role="tooltip" data-controller="popover">
                    <div class="popover-arrow"></div>
                    <div class="popover-header">
                    </div>
                    <div class="popover-body">
                    </div>
                    </div>`,
        title: (btn) => `<div class="d-flex justify-content-between align-content-center">
        <div class="fw-semibold align-self-center">${btn.dataset.bsTitle}:</div>
        <button class="btn p-0 ms-2 fs-5 lh-1" aria-label="Close this thing" onclick="bootstrap.Popover.getInstance('#${btn.id}').hide();" type="button">
          <i class="bi bi-x"></i>
        </button></div>`,
        html: true,
        // tags and attributes allowed in the popover, everything not listed will be stripped
        // needed to be able to put a data-controller and data-action in popover
        allowList: {
          '*': ['class', 'role', 'aria-*'], // allow data-custom and data-another
          div: ['class', 'role'],
          button: ['onclick'],
          i: ['class']
        }
      })
    })
})

Notes