Documentation and examples for adding custom tooltips.

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-2 px-4 inline-block text-center rounded leading-5 text-gray-100 bg-indigo-500 border border-indigo-500 hover:text-white hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:bg-indigo-600 focus:border-indigo-600 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-2 px-4 inline-block text-center rounded leading-5 text-gray-100 bg-indigo-500 border border-indigo-500 hover:text-white hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:bg-indigo-600 focus:border-indigo-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 ltr:ml-6 rtl:mr-6"></div>
  </div>
</div>

<!-- tooltip with microtip -->
<button aria-label="Tooltip with microtip" data-microtip-position="top" role="tooltip" type="button" class="py-2 px-4 inline-block text-center rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0">
  Tooltip with microtip
</button>