breakout71/src/tooltip.ts

import { isOptionOn } from "./options";

export function setupTooltips() {
  const tooltip = document.getElementById("tooltip") as HTMLDivElement;
  if (isOptionOn("mobile-mode")) {
    tooltip.style.display = "none";
    return;
  }

  function updateTooltipPosition(e: MouseEvent) {
    tooltip.style.transform =
      `translate(${e.clientX}px,${e.clientY + 20}px) ` +
      (e.clientX > window.innerWidth / 2 ? " translate(-100%,0)" : "");
  }

  function closeToolTip() {
    tooltip.style.display = "none";
    hovering = null;
  }
  let hovering: HTMLElement | null = null;
  document.body.addEventListener(
    "mouseenter",
    (e: MouseEvent) => {
      let parent: HTMLElement | null = e.target as HTMLElement;
      while (parent && !parent.hasAttribute("data-tooltip")) {
        parent = parent.parentElement;
      }
      if (parent?.getAttribute("data-tooltip")?.trim()) {
        hovering = parent as HTMLElement;
        tooltip.innerHTML = hovering.getAttribute("data-tooltip") || "";
        tooltip.style.display = "";
        updateTooltipPosition(e);
      } else {
        closeToolTip();
      }
    },
    true,
  );

  setInterval(() => {
    if (hovering) {
      if (!document.body.contains(hovering)) {
        closeToolTip();
      }
    }
  }, 200);
  document.body.addEventListener(
    "mousemove",
    (e) => {
      if (!tooltip.style.display) {
        updateTooltipPosition(e);
      }
    },
    true,
  );
  document.body.addEventListener("mouseleave", (e) => {
    closeToolTip();
  });
}