breakout71/src/tooltip.ts

import { isOptionOn } from "./options";

export function setupTooltips() {
  if (isOptionOn("mobile-mode")) {
    setupMobileTooltips(tooltip);
  } else {
    setupDesktopTooltips(tooltip);
  }
}

const tooltip = document.getElementById("tooltip") as HTMLDivElement;

function setupMobileTooltips(tooltip: HTMLDivElement) {
  function openTooltip(e: Event) {
    const hovering = e.target as HTMLElement;
    if (!hovering?.hasAttribute("data-help-content")) {
      return;
    }
    e.stopPropagation();
    e.preventDefault();
    tooltip.innerHTML = hovering.getAttribute("data-help-content") || "";
    tooltip.style.display = "";
    const { left, top, height } = hovering.getBoundingClientRect();
    tooltip.style.transform = `translate(${left}px,${top}px) translate(${left > window.innerWidth / 2 ? "-100%" : "0"},${top > window.innerHeight / 3 ? "-100%" : height + "px"})`;
  }

  document.body.addEventListener("touchstart", openTooltip, true);
  document.body.addEventListener("mousedown", openTooltip, true);

  function closeTooltip(e: Event) {
    const hovering = e.target as HTMLElement;
    if (!hovering?.hasAttribute("data-help-content")) {
      return;
    }

    e.stopPropagation();
    e.preventDefault();
    tooltip.style.display = "none";
  }

  document.body.addEventListener("touchend", closeTooltip, true);
  document.body.addEventListener("mouseup", closeTooltip, true);

  function ignoreClick(e: Event) {
    const hovering = e.target as HTMLElement;
    if (!hovering?.hasAttribute("data-help-content")) {
      return;
    }

    e.stopPropagation();
    e.preventDefault();
  }
  document.body.addEventListener("click", ignoreClick, true);
}

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

  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();
    },
    true,
  );
}