Tailwind CSS Tooltip

Documentation and examples for adding custom Bootstrap tooltips with TailwindCSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage.

Basic Example

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.

Design
HTML

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