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

  let activeEl = null;

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

    activeEl = target;
    tooltip.textContent = target.getAttribute('alt');
    tooltip.style.opacity = '1';
    tooltip.style.transform = 'translateY(0)';

    // Tooltip Position beim Bewegen
    const move = ev => {
      const offset = 14;
      let x = ev.clientX + offset;
      let y = ev.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';
    };

    move(e); // Position initial setzen
    target.addEventListener('mousemove', move);

    // Mouseleave
    target.addEventListener('mouseleave', () => {
      tooltip.style.opacity = '0';
      tooltip.style.transform = 'translateY(4px)';
      target.removeEventListener('mousemove', move);
      activeEl = null;
    }, { once: true });
  });
})();