Tailwind tooltip

Responsive tooltips built with Tailwind. Tooltip displays informative text when users hover, focus, or tap an element. They display text tips next to the element in question.


Basic example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button
      class="bg-purple-500 text-white active:bg-purple-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
      type="button" onmouseenter="openPopover(event,'tooltip-example')"
      onmouseleave="openPopover(event,'tooltip-example')">
      Hover me
    </button>
    <div
      class="hidden bg-white border-0 mb-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg"
      id="tooltip-example">
      <div>
        <div class="bg-white text-gray opacity-75 p-3 mb-0 border border-solid uppercase rounded">
          Hi. I am tooltip.
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Required popper.js -->
<script src="https://unpkg.com/@popperjs/core@2.9.1/dist/umd/popper.min.js" charset="utf-8"></script>
<script>
  function openPopover(event, tooltipID) {
    let element = event.target;
    while (element.nodeName !== "BUTTON") {
      element = element.parentNode;
    }
    var popper = Popper.createPopper(element, document.getElementById(tooltipID), {
      placement: 'top'
    });
    document.getElementById(tooltipID).classList.toggle("hidden");
  }
</script>