MediaWiki:Common.js: Difference between revisions

/* Any JavaScript here will be loaded for all users on every page load. */
/* Schönes Tooltip-System auf Basis von alt-Attributen
   Funktioniert sicher mit Citizen & MediaWiki UI */

(function() {
  'use strict';

  // Tooltip erstellen
  const tooltip = document.createElement('div');
  tooltip.id = 'mw-global-tooltip';
  Object.assign(tooltip.style, {
    position: 'fixed',
    zIndex: 999999,
    background: 'rgba(0,0,0,0.85)',
    color: '#fff',
    padding: '5px 10px',
    borderRadius: '5px',
    fontSize: '12px',
    pointerEvents: 'none',  // Wichtig: blockiert keine Klicks
    opacity: '0',
    transition: 'opacity 0.15s, transform 0.1s',
    transform: 'translateY(4px)',
    whiteSpace: 'nowrap'
  });
  document.body.appendChild(tooltip);

  let activeEl = null;
  let storedTitle = null;

  // Tooltip anzeigen
  function showTooltip(e) {
    const el = e.target.closest('[title]');
    if (!el) return;

    activeEl = el;
    storedTitle = el.getAttribute('title');
    if (!storedTitle) return;

    el.removeAttribute('title'); // Native verhindern
    tooltip.textContent = storedTitle;
    tooltip.style.opacity = '1';
    tooltip.style.transform = 'translateY(0)';

    moveTooltip(e);

    el.addEventListener('mousemove', moveTooltip);
    el.addEventListener('mouseleave', hideTooltip, { once: true });
  }

  // Tooltip bewegen
  function moveTooltip(e) {
    if (!activeEl) return;
    const offset = 12;
    const rect = tooltip.getBoundingClientRect();
    let x = e.clientX + offset;
    let y = e.clientY + offset;

    const maxX = window.innerWidth - rect.width - 10;
    const maxY = window.innerHeight - rect.height - 10;

    tooltip.style.left = Math.min(x, maxX) + 'px';
    tooltip.style.top = Math.min(y, maxY) + 'px';
  }

  // Tooltip ausblenden
  function hideTooltip() {
    if (!activeEl) return;
    tooltip.style.opacity = '0';
    tooltip.style.transform = 'translateY(4px)';
    activeEl.setAttribute('title', storedTitle); // original wiederherstellen
    activeEl.removeEventListener('mousemove', moveTooltip);
    activeEl = null;
    storedTitle = null;
  }

  // Globales Event
  document.addEventListener('mouseover', showTooltip);

})();