Tooltip

Example

                
                  <!-- 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-3 px-5 inline-block text-center rounded-md leading-normal text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0">
                      Tooltip on top
                    </button>
                    <!-- tooltip area -->
                    <div class="absolute top-auto bottom-full 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 ltr:ml-6 rtl:mr-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-3 px-5 inline-block text-center rounded-md leading-normal text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 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 ltr:ml-6 rtl:mr-6"></div>
                    </div>
                  </div>