MediaWiki:Common.js: Difference between revisions

/* Any JavaScript here will be loaded for all users on every page load. */
(function () {
  const tooltip = document.createElement("div");
  tooltip.className = "custom-tooltip";
  document.body.appendChild(tooltip);

  let active = null;
  let storedTitle = null;

  function showTooltip(target, x, y) {
    const text = target.getAttribute("alt") || target.getAttribute("title");
    if (!text) return;

    // Browser-Tooltip deaktivieren
    if (target.hasAttribute("title")) {
      storedTitle = target.getAttribute("title");
      target.removeAttribute("title");
    }

    tooltip.textContent = text;
    tooltip.style.display = "block";

    const updatePosition = (cx, cy) => {
      const rect = tooltip.getBoundingClientRect();
      const offset = 12;
      let left = cx + offset;
      let top = cy + offset;
      if (left + rect.width > window.innerWidth - 10)
        left = cx - rect.width - offset;
      if (top + rect.height > window.innerHeight - 10)
        top = cy - rect.height - offset;
      tooltip.style.left = `${left}px`;
      tooltip.style.top = `${top}px`;
    };

    const moveHandler = e => updatePosition(e.clientX, e.clientY);
    updatePosition(x, y);
    document.addEventListener("mousemove", moveHandler);

    target.addEventListener(
      "mouseleave",
      () => {
        tooltip.classList.remove("visible");
        tooltip.style.display = "none";
        document.removeEventListener("mousemove", moveHandler);
        if (storedTitle) {
          target.setAttribute("title", storedTitle);
          storedTitle = null;
        }
        active = null;
      },
      { once: true }
    );

    requestAnimationFrame(() => tooltip.classList.add("visible"));
  }

  // Globaler Mouseover – auch für nachgeladene Elemente
  document.addEventListener("mouseover", e => {
    const target = e.target.closest("[title], [alt]");
    if (!target || active === target) return;
    active = target;
    const x = e.clientX;
    const y = e.clientY;
    showTooltip(target, x, y);
  });

  // optional: bei DOM-Änderungen Tooltips neu aktivieren (z. B. wenn Skin-Module UI nachladen)
  const observer = new MutationObserver(() => {
    // nichts zu tun – der Eventlistener ist global, aber dies stellt sicher, dass der Tooltip-Container immer oben bleibt
    document.body.appendChild(tooltip);
  });
  observer.observe(document.body, { childList: true, subtree: true });
})();