DOCUMENTATION

<div class="mt-4">
    <button type="button"
        class="inline-block px-6 py-2 mb-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"
        onmouseenter="toggleTooltip(event,'top','tooltipt')"
        onmouseleave="toggleTooltip(event,'top','tooltipt')">Tooltip on top</button>
    <div id="tooltipt" class="z-50 hidden w-32 px-2 py-1 text-sm text-center text-white bg-gray-900 rounded">
        Tooltip on top
        <svg class="absolute z-10 w-6 h-6 text-gray-900 transform translate-x-[2.5rem] -translate-y-2 fill-current stroke-current"
            width="8" height="8">
            <rect x="12" y="-10" width="12" height="12" transform="rotate(45)" />
        </svg>
    </div>
    <button type="button"
        class="inline-block px-6 py-2 mb-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"
        onmouseenter="toggleTooltip(event,'right','tooltipe')"
        onmouseleave="toggleTooltip(event,'right','tooltipe')">Tooltip on end</button>
    <div id="tooltipe" class="hidden w-32 px-2 py-1 text-sm text-center text-white bg-gray-900 rounded">
        Tooltip on end
        <svg class="absolute z-10 w-6 h-6 text-gray-900 transform -translate-x-6 -translate-y-4 fill-current stroke-current"
            width="8" height="8">
            <rect x="12" y="-10" width="8" height="8" transform="rotate(45)" />
        </svg>
    </div>
    <button type="button"
        class="inline-block px-6 py-2 mb-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"
        onmouseenter="toggleTooltip(event,'bottom','tooltipb')"
        onmouseleave="toggleTooltip(event,'bottom','tooltipb')">Tooltip on bottom
    </button>
    <div id="tooltipb" class="hidden px-2 py-1 text-sm text-center text-white bg-gray-900 rounded w-36">
        Tooltip on bottom
        <svg class="absolute z-10 w-6 h-6 text-gray-900 transform translate-x-12 -translate-y-8 fill-current stroke-current"
            width="8" height="8">
            <rect x="12" y="-10" width="12" height="12" transform="rotate(45)" />
        </svg>
    </div>
    <button type="button"
        class="inline-block px-6 py-2 mb-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"
        onmouseenter="toggleTooltip(event,'left','tooltipss')"
        onmouseleave="toggleTooltip(event,'left','tooltipss')">Tooltip on start</button>
    <div id="tooltipss" class="hidden w-32 px-2 py-1 z-50 text-sm text-center text-white bg-gray-900 rounded">
        Tooltip on start
        <svg class="absolute z-10 w-6 h-6 text-gray-900 transform translate-x-[6.5rem] -translate-y-4 fill-current stroke-current"
            width="8" height="8">
            <rect x="12" y="-10" width="8" height="8" transform="rotate(45)" />
        </svg>
    </div>
    <button type="button"
        class="inline-block px-6 py-2 mb-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"
        onmouseenter="toggleTooltip(event,'top','tooltipw')"
        onmouseleave="toggleTooltip(event,'top','tooltipw')">Tooltip with HTML</button>
    <div id="tooltipw" class="hidden px-2 py-1 text-sm text-center text-white bg-gray-900 rounded w-36">
        <span class="z-50"><em>Tooltip</em> <u>with</u> <b>HTML</b></span>
        <svg class="absolute z-10 w-6 h-6 text-gray-900 transform translate-x-12 -translate-y-2 fill-current stroke-current"
            width="8" height="8">
            <rect x="12" y="-10" width="12" height="12" transform="rotate(45)" />
        </svg>
    </div>
</div>
      

function toggleTooltip(event, placement, popoverID) {
    let element = event.target;
    while (element.nodeName !== "BUTTON") {
      element = element.parentNode;
    }
    Popper.createPopper(element, document.getElementById(popoverID), {
      modifiers: [
        {
          name: 'offset',
          options: {
            offset: [0, 10],
          },
        },
      ],
  
      placement: placement,
    });
    document.getElementById(popoverID).classList.toggle("hidden");
}