DOCUMENTATION

<div class="relative">
    <button type="button"
        class="inline-block px-6 py-2 mb-4 mr-4  
                    text-center text-white transition-all duration-500 ease-in-out bg-red-500 border border-red-500 rounded shadow-md hover:shadow-xl hover:bg-red-600 focus:bg-red-600"
        onclick="toggleTooltip('tooltip000')">Click to toggle popover</button>

    <div id="tooltip000" class="absolute -top-[7.5rem] z-10 hidden text-sm bg-white border rounded w-72">
        <h3 class=" px-4 py-2 mb-0  bg-gray-300 border-b">Popover title</h3>
        <div class="p-4 text-gray-500">And here's some amazing content. It's very engaging. Right?
        </div>
        <span class="absolute border-r border-b left-32 -bottom-[0.45rem] w-3 h-3 bg-white transform rotate-45 -mt-1 mr-3"></span>
    </div>
</div>
      

function togglepopover(popoverID) 
{
    document.getElementById(popoverID).classList.toggle("hidden");
}
      

<div class="mt-4 flex flex-wrap">
    <div class="relative">
        <button type="button"
            class="inline-block px-6 py-2 mb-4 mr-4  
                    text-center text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 rounded shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700"
            onclick="toggleTooltip('tooltip001')">Popover on top</button>
        <div id="tooltip001" class="absolute -top-[5.25rem] hidden z-50 text-sm 
                    bg-white border rounded w-72">
            <div class="p-4 text-gray-500">Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</div>
            <span
                class="absolute border-r border-b -bottom-[0.40rem] left-20 w-3 h-3 bg-white transform rotate-45"></span>
        </div>
    </div>

    <div class="relative">
        <button type="button"
            class="inline-block px-6 py-2 mb-4 mr-4  
                    text-center text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 rounded shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700"
            onclick="toggleTooltip('tooltip002')">Popover on end</button>
        <div id="tooltip002" class="z-10 absolute left-[11.25rem] -top-4 hidden text-sm 
                    bg-white border rounded md:w-72 w-32 ">
            <div class="p-4 text-gray-500">Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</div>
            <span
                class="absolute border-l border-b top-8 -left-2 w-3 h-3 bg-white transform rotate-45 -mt-1 mr-3"></span>
        </div>
    </div>

    <div class="relative">
        <button type="button"
            class="inline-block px-6 py-2 mb-4 mr-4  
                    text-center text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 rounded shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700"
            onclick="toggleTooltip('tooltip003')">Popover on bottom</button>
        <div id="tooltip003" class="hidden text-sm absolute top-[3.25rem] z-10
                    bg-white border rounded w-72">
            <div class="p-4 text-gray-500">Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</div>
            <span
                class="absolute border-l border-t top-0 right-32 w-3 h-3 bg-white transform rotate-45 -mt-2 mr-3"></span>
        </div>
    </div>


    <div class="relative">
        <button type="button"
            class=" inline-block px-6 py-2 mb-4 mr-4  
                    text-center text-white transition-all duration-500 ease-in-out bg-gray-600 border border-gray-600 rounded shadow-md hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700"
            onclick="toggleTooltip('tooltip004')">Popover on start</button>
        <div id="tooltip004" class="hidden z-10 text-sm absolute -top-4 right-24 md:right-[unset] md:-left-8 lg:-left-[18.6rem] md:w-32
                    bg-white border rounded lg:w-72 w-28">
            <div class="p-4 text-gray-500">Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</div>
            <span
                class="absolute border-r border-t top-8 -right-1 w-3 h-3 bg-white transform rotate-45 -mr-1"></span>
        </div>
    </div>
</div>