Tailwind popover

Responsive popovers built with Tailwind. Popover is like a tooltip, but it can persist after hovering off. It allows displaying more content including header & footer.


Basc 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
34
35
36
<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-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
          type="button" onclick="openPopover(event,'popover-example-left')">
          Click me
      </button>
      <div class="hidden bg-white border mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg"
          id="popover-example-left">
          <div>
              <div
                  class="text-gray-700 opacity-75 font-semibold p-3 mb-0 border-b border-solid border-gray-100 uppercase rounded-t-lg">
                  Popover title
              </div>
              <div class="text-gray-700 p-3">
                  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Saepe, non.
              </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, popoverID) {
      let element = event.target;
      while (element.nodeName !== "BUTTON") {
          element = element.parentNode;
      }
      var popper = Popper.createPopper(element, document.getElementById(popoverID), {
          placement: 'left'
      });
      document.getElementById(popoverID).classList.toggle("hidden");
  }
</script>