|
|
| Line 1: |
Line 1: |
| /* Any JavaScript here will be loaded for all users on every page load. */ | | /* 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 });
| |
| })();
| |
/* Any JavaScript here will be loaded for all users on every page load. */
