JavaScript bottom tooltips

JavaScript pop over component that appears to the bottom of a button on user hover.

Examples

For this component to properly work, we had to add the following script inside the code snippet / HTML file:
<script src="https://unpkg.com/@popperjs/[email protected]/dist/umd/popper.min.js" charset="utf-8"></script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button class="bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" onmouseenter="openPopover(event,'popover-id')" onmouseleave="openPopover(event,'popover-id')">
      bottom pink
    </button>
    <div class="hidden bg-pink-600 border-0 mt-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg" id="popover-id">
      <div>
        <div class="bg-pink-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          teal tooltip title
        </div>
        <div class="text-white p-3">
          And here's some amazing content. It's very engaging. Right?
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://unpkg.com/@popperjs/[email protected]/dist/umd/popper.min.js" charset="utf-8"></script>
<script>
  function openPopover(event,popoverID){
    let element = event.target;
    while(element.nodeName !== "BUTTON"){
      element = element.parentNode;
    }
    var popper = Popper.createPopper(element, document.getElementById(popoverID), {
      placement: 'bottom'
    });
    document.getElementById(popoverID).classList.toggle("hidden");
  }
</script>