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';

  function createTooltip() {
    const tooltip = document.createElement('div');
    tooltip.id = 'mw-custom-tooltip';
    Object.assign(tooltip.style, {
      position: 'fixed',
      zIndex: 9999,
      background: 'rgba(20,20,20,0.9)',
      color: '#fff',
      padding: '6px 10px',
      borderRadius: '6px',
      fontSize: '13px',
      lineHeight: '1.3',
      pointerEvents: 'none',
      opacity: '0',
      transition: 'opacity 0.15s ease, transform 0.1s ease',
      transform: 'translateY(4px)'
    });
    document.body.appendChild(tooltip);
    return tooltip;
  }

  const tooltip = createTooltip();
  let activeEl = null;
  let hideTimeout;

  function showTooltip(e) {
    const el = e.currentTarget;
    const text = el.getAttribute('alt');
    if (!text) return;

    clearTimeout(hideTimeout);
    tooltip.textContent = text;
    tooltip.style.opacity = '1';
    tooltip.style.transform = 'translateY(0)';
    activeEl = el;
  }

  function moveTooltip(e) {
    if (!activeEl) return;
    const offset = 14;
    let x = e.clientX + offset;
    let y = e.clientY + offset;

    const rect = tooltip.getBoundingClientRect();
    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';
  }

  function hideTooltip() {
    activeEl = null;
    tooltip.style.opacity = '0';
    tooltip.style.transform = 'translateY(4px)';
  }

  // Initialisieren + auf spätere DOM-Änderungen reagieren
  function bindTooltips(root = document) {
    root.querySelectorAll('[alt]').forEach(el => {
      if (el.dataset.tooltipBound) return;
      el.addEventListener('mouseenter', showTooltip);
      el.addEventListener('mousemove', moveTooltip);
      el.addEventListener('mouseleave', hideTooltip);
      el.dataset.tooltipBound = 'true';
    });
  }

  // Erste Bindung nach DOM-Load
  mw.hook('wikipage.content').add(bindTooltips);
  bindTooltips(document);
})();