Tooltip

<div class="gap-4 grid items-center grid-cols-2 [&_[data-tippy-root]]:inline-block md:grid-cols-4"> <!-- <- this is just for demo purposes -->
  <div>
    <div data-tippy-root>
      <div class="tippy-box" data-placement="top">
        <div class="tippy-backdrop"></div>
        <div class="tippy-arrow"></div>
        <div class="tippy-content">Top</div>
      </div>
    </div>
    <div class="mt-1 pl-4 text-sm">Top</div> <!-- this is for demo purposes -->
  </div>
  <div>
    <div class="mb-1 pl-4 text-sm">Bottom</div> <!-- this is for demo purposes -->
    <div data-tippy-root>
      <div class="tippy-box" data-placement="bottom">
        <div class="tippy-backdrop"></div>
        <div class="tippy-arrow"></div>
        <div class="tippy-content">Bottom</div>
      </div>
    </div>
  </div>
  <div>
    <div data-tippy-root>
      <div class="tippy-box" data-placement="left">
        <div class="tippy-backdrop"></div>
        <div class="tippy-arrow"></div>
        <div class="tippy-content">Left</div>
      </div>
    </div>
    <span class="ml-2 text-sm">Left</span> <!-- this is for demo purposes -->
  </div>
  <div>
    <span class="mr-2 text-sm">Right</span> <!-- this is for demo purposes -->
    <div data-tippy-root>
      <div class="tippy-box" data-placement="right">
        <div class="tippy-backdrop"></div>
        <div class="tippy-arrow"></div>
        <div class="tippy-content">Right</div>
      </div>
    </div>
  </div>
</div>

<button class="prs-btn prs-btn-primary" x-tooltip="'Tooltip'">Hover/Focus for Tooltip</button>
<button class="prs-btn prs-btn-primary" @mouseenter="$tooltip('Tooltip')">Hover Only</button>
<button class="prs-btn prs-btn-primary" @focus="$tooltip('Tooltip')">Focus Only</button>

import Alpine from 'alpinejs'
import tippy from 'tippy.js'

document.addEventListener('alpine:init', () => {
  Alpine.magic('tooltip', el => message => {
    let instance = tippy(el, {
      content: message,
      trigger: 'manual',
    });

    // Add Escape handler *before* showing the tooltip
    const onEscape = (e) => {
      if (e.key === 'Escape') cleanup();
    };

    const cleanup = () => {
      instance.hide();
      setTimeout(() => instance.destroy(), 150);
      document.removeEventListener('keydown', onEscape);
      el.removeEventListener('mouseleave', cleanup);
      el.removeEventListener('blur', cleanup);
    };

    document.addEventListener('keydown', onEscape);
    el.addEventListener('mouseleave', cleanup);
    el.addEventListener('blur', cleanup);

    instance.show();

    // Optional fallback timeout
    setTimeout(cleanup, 2000);
  });

  Alpine.directive('tooltip', (el, { expression }, { evaluate }) => {
    const instance = tippy(el, {
      content: evaluate(expression),
    });

    const onEscape = (e) => {
      if (e.key === 'Escape') {
        instance.hide();
      }
    };

    document.addEventListener('keydown', onEscape);

    el._tippyCleanup = () => {
      document.removeEventListener('keydown', onEscape);
      instance.destroy();
    };
  });

  document.addEventListener('alpine:clean', (e) => {
    const el = e.target;
    if (el._tippyCleanup) {
      el._tippyCleanup();
      delete el._tippyCleanup;
    }
  });
});