Tooltip

Use the following Tailwind CSS powered tooltips to show extra content when hovering or focusing on an element
Basic Example

<button
    data-bs-toggle="tooltip"
    data-bs-placement="top"
    data-bs-title="Tooltip on top"
    type="button"
    class="btn gap-x-2 bg-indigo-600 text-white border-indigo-600 disabled:opacity-50 disabled:pointer-events-none hover:bg-indigo-800 hover:border-indigo-800 active:bg-indigo-800 active:border-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-300 "
    >
 Tooltip on Top
 </button>
 <button
    data-bs-toggle="tooltip"
    data-bs-placement="bottom"
    data-bs-title="Tooltip on Bottom"
    type="button"
    class="btn gap-x-2 bg-indigo-600 text-white border-indigo-600 disabled:opacity-50 disabled:pointer-events-none hover:bg-indigo-800 hover:border-indigo-800 active:bg-indigo-800 active:border-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-300 "
    >
 Tooltip on Bottom
 </button>
 <button
    data-bs-toggle="tooltip"
    data-bs-placement="right"
    data-bs-title="Tooltip on Right"
    type="button"
    class="btn gap-x-2 bg-indigo-600 text-white border-indigo-600 disabled:opacity-50 disabled:pointer-events-none hover:bg-indigo-800 hover:border-indigo-800 active:bg-indigo-800 active:border-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-300 "
    >
 Tooltip on Right
 </button>
 <button
    data-bs-toggle="tooltip"
    data-bs-placement="left"
    data-bs-title="Tooltip on Left"
    type="button"
    class="btn gap-x-2 bg-indigo-600 text-white border-indigo-600 disabled:opacity-50 disabled:pointer-events-none hover:bg-indigo-800 hover:border-indigo-800 active:bg-indigo-800 active:border-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-300 "
    >
 Tooltip on Left
 </button>