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() {
  const tooltip = document.createElement('div');
  Object.assign(tooltip.style, {
    position: 'absolute',
    zIndex: 999999,
    background: 'rgba(20,20,20,0.95)',
    color: '#fff',
    padding: '8px 12px',
    borderRadius: '6px',
    fontSize: '13px',
    lineHeight: '1.4',
    maxWidth: '220px',
    wordWrap: 'break-word',
    pointerEvents: 'none',
    opacity: '0',
    transition: 'opacity 0.2s, transform 0.15s',
  });
  document.body.appendChild(tooltip);

  const arrow = document.createElement('div');
  Object.assign(arrow.style, {
    position: 'absolute',
    width: '0',
    height: '0',
    borderLeft: '6px solid transparent',
    borderRight: '6px solid transparent',
    borderTop: '6px solid rgba(20,20,20,0.95)',
    pointerEvents: 'none',
  });
  tooltip.appendChild(arrow);

  let activeEl = null;
  let storedTitle = null;

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

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

    activeEl = el;
    el.removeAttribute('title');

    tooltip.textContent = storedTitle;
    tooltip.appendChild(arrow);
    tooltip.style.opacity = '0';

    // Warten bis Browser die Größe kennt
    requestAnimationFrame(() => {
      positionTooltip(el);
      tooltip.style.opacity = '1';
    });

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

  function hideTooltip() {
    if (!activeEl) return;
    tooltip.style.opacity = '0';
    activeEl.setAttribute('title', storedTitle);
    activeEl = null;
    storedTitle = null;
  }

  function positionTooltip(el) {
    const rect = el.getBoundingClientRect();
    const ttRect = tooltip.getBoundingClientRect();
    const spacing = 6;

    let top = rect.bottom + spacing;
    let left = rect.left + rect.width/2 - ttRect.width/2;

    // Kollision mit Viewport
    if (top + ttRect.height > window.innerHeight) {
      top = rect.top - ttRect.height - spacing; // nach oben
    }
    if (left < 4) left = 4;
    if (left + ttRect.width > window.innerWidth - 4)
      left = window.innerWidth - ttRect.width - 4;

    tooltip.style.top = `${top + window.scrollY}px`;
    tooltip.style.left = `${left + window.scrollX}px`;

    // Pfeil positionieren (unten oder oben)
    if (top < rect.top) { // Tooltip oben
      Object.assign(arrow.style, {
        top: '100%',
        left: '50%',
        transform: 'translateX(-50%) rotate(0deg)',
      });
    } else { // Tooltip unten
      Object.assign(arrow.style, {
        top: '-6px',
        left: '50%',
        transform: 'translateX(-50%) rotate(180deg)',
      });
    }
  }

  document.addEventListener('mouseover', showTooltip);
})();