MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

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

  let activeElement = null;
  let storedTitle = null;

  document.addEventListener("mouseover", e => {
    const target = e.target.closest("[title], [alt]");
    if (!target) return;

    // Tooltip-Text: bevorzugt alt, sonst title
    const text = target.getAttribute("alt") || target.getAttribute("title");
    if (!text) return;

    // Titel deaktivieren, damit Browser-Tooltip nicht angezeigt wird
    if (target.hasAttribute("title")) {
      storedTitle = target.getAttribute("title");
      target.removeAttribute("title");
    }

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

    const updatePosition = (x, y) => {
      const tooltipRect = tooltip.getBoundingClientRect();
      const pageWidth = window.innerWidth;
      const pageHeight = window.innerHeight;
      const offset = 12;

      let left = x + offset;
      let top = y + offset;

      if (left + tooltipRect.width > pageWidth - 10)
        left = x - tooltipRect.width - offset;
      if (top + tooltipRect.height > pageHeight - 10)
        top = y - tooltipRect.height - offset;

      tooltip.style.left = `${left}px`;
      tooltip.style.top = `${top}px`;
    };

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

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

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