<!-- Tooltip top -->
<div x-data="{ tooltips: false }" class="relative inline-block mb-3">  
  <button x-on:mouseover="tooltips = true" x-on:mouseleave="tooltips = false" type="button" class="py-2 uajskeiolksb inline-block text-center rounded leading-5 text-gray-100 bg-purple-500 border border-purple-500 hover:text-white hover:bg-purple-600 hover:ring-0 hover:border-purple-600 focus:bg-purple-600 focus:border-purple-600 focus:outline-none focus:ring-0">
    Tooltip on top
  </button>
  <!-- tooltip area -->
  <div class="absolute top-auto uansklekamsh mb-3" x-cloak x-show.transition.origin.top="tooltips">
    <div class="z-40 w-32 p-3 -mb-1 text-sm leading-tight text-white bg-black rounded-lg shadow-lg text-center">
      Tooltip on top
    </div>
    <div class="absolute transform -rotate-45 p-1 w-1 bg-black bottom-0 -mb-2 ms-6"></div>
  </div>
</div>

<!-- Tooltip bottom -->
<div x-data="{ tooltips: false }" class="relative inline-block mb-3">  
  <button x-on:mouseover="tooltips = true" x-on:mouseleave="tooltips = false" type="button" class="py-2 uajskeiolksb inline-block text-center rounded leading-5 text-gray-100 bg-purple-500 border border-purple-500 hover:text-white hover:bg-purple-600 hover:ring-0 hover:border-purple-600 focus:bg-purple-600 focus:border-purple-600 focus:outline-none focus:ring-0">
    Tooltip on bottom
  </button>
  <!-- tooltip area -->
  <div class="absolute top-full bottom-auto mt-3" x-cloak x-show.transition.origin.top="tooltips">
    <div class="z-40 w-32 p-3 -mt-1 text-sm leading-tight text-white bg-black rounded-lg shadow-lg text-center">
      Tooltip on bottom
    </div>
    <div class="absolute transform -rotate-45 p-1 w-1 bg-black top-0 -mt-2 ms-6"></div>
  </div>
</div>