Rails Popper Stimulus Index file

index.html.erb

<section class="bg-gray-100 h-full w-full">
  <div class="container mx-auto px-2 md:px-4 py-4">
    <div class="flex justify-center items-center h-full md:h-screen">
      <div class="flex flex-col p-5 border border-gray-500 bg-white shadow-xl rounded-xl w-96 h-96 items-center justify-center">
        <h2>Button with popper</h2>
        <div data-controller="popper">
          <button id="button" data-popper-target="element" data-action="mouseenter->popper#show mouseleave->popper#hide" class="bg-blue-500 text-blue-100 px-3 py-2 rounded-xl">
            Over me!
            <div id="tooltip" role="tooltip" data-popper-target="tooltip">
              My tooltip
              <div id="arrow" data-popper-arrow></div>
            </div>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>