<button
  className={"btn"}
  title={btnLabel}
  data-pop-target={id}
  onClick={(e) => showPopover(e)}
>
  {icon && icon}
  {showBtnLabel && btnLabel}
</button>
<span
  className={'${showBackDrop ? " with-backdrop" : ""}'}
  id={id}
  popover={popType}
  data-pop-position={position}
>
  {children}
</span>

<script>
// Showing the popover
const showPopover: Function = (pop) => {
  // Default position is top - can be overridden by left, right and bottom with data-pop-position=""
  const popDataTarget = pop.currentTarget.dataset.popTarget
  const popTarget = document.querySelector('#popDataTarget')

  if (popTarget) {
    // Init togglePopover
    popTarget.togglePopover()

    // Popover alignment
    const popTrigger = pop.currentTarget.getBoundingClientRect();
    popTarget.style.top = popTrigger.top + popTrigger.height / 2 - popTarget.offsetHeight / 2 + "px"
    popTarget.style.left = popTrigger.left + popTrigger.width / 2 - popTarget.offsetWidth / 2 + "px"

    // Horizontal
    if (position === "left") {
      popTarget.style.left = popTrigger.left - popTarget.offsetWidth - 10 + "px"
    } else if (position === "right") {
      popTarget.style.left = popTrigger.right + 10 + "px"
    }

    // Vertical
    if (position === "top") {
      popTarget.style.top = popTrigger.top - popTarget.offsetHeight - 10 + "px"
    } else if (position === "bottom") {
      popTarget.style.top = popTrigger.bottom + 10 + "px"
    }

    window.addEventListener("resize", () => {
      popTarget.hidePopover()
    })
  }
}
</script>