openaustralia/planningalerts

<div
  class="relative inline-block"
  x-data="{
    open: false,
    cleanup: null,
    updatePosition() {
      window.FloatingUIDOM.computePosition($refs.button, $refs.popover, {
        placement: 'bottom',
        middleware: [
          window.FloatingUIDOM.flip(),
          window.FloatingUIDOM.offset(24),
          window.FloatingUIDOM.shift(),
          window.FloatingUIDOM.arrow({ element: $refs.arrow }),
        ],
      }).then(({x, y, middlewareData, placement }) => {
        const staticSide = {
          top: 'bottom',
          bottom: 'top',
        }[placement];

        Object.assign($refs.popover.style, {
          left: x + 'px',
          top: y + 'px',
        });

        if (middlewareData.arrow) {
          const { x, y } = middlewareData.arrow;
          Object.assign($refs.arrow.style, {
            left: x != null ? (x + 'px') : '',
            top: y != null ? (y + 'px') : '',
            [staticSide]: '-12px',
          });
        }
      });
    }
  }"
  x-init="
    $watch('open', (open) => {
      if (open) {
        cleanup = window.FloatingUIDOM.autoUpdate($refs.button, $refs.popover, updatePosition);
      } else {
        if (!!cleanup) {
          cleanup();
        }
      }
    });
  ">
  <%# TODO: Is info icon too small? How can we make the click area larger? %>
  <%# TODO: Remove duplication between here and pa_link_classes view helper %>
  <button x-ref="button" x-on:click.prevent="open=!open" class="text-base font-bold text-white rounded-full size-6 bg-fuchsia hover:bg-fuchsia-darker focus:outline-none focus:ring-sun-yellow focus:ring-4">
    <span class="sr-only">Info</span>
    i
  </button>
  <%# TODO: Choose a more sensible default width %>
  <%# TODO: Drop shadow doesn't currently match what was designed %>
  <%# TODO: Make something work when javascript is disabled. For example see https://stackoverflow.com/a/19199858 %>
  <div x-ref="popover" role="tooltip" class="w-[500px] max-w-[100vw] absolute z-10" x-show="open" x-on:click.outside="open=false" x-transition>
    <div x-ref="arrow" class="absolute w-6 h-6 rotate-45 bg-navy"></div>
    <div class="px-8 py-6 text-white shadow-md bg-navy">
      <%= content %>
    </div>
  </div>
</div>