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

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

    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;

    const spaceAbove = rect.top;
    const spaceBelow = window.innerHeight - rect.bottom;
    const spaceLeft = rect.left;
    const spaceRight = window.innerWidth - rect.right;

    // Standard: oben
    let position = 'top';

    // Platz prüfen
    if (spaceAbove < ttRect.height + spacing && spaceBelow > ttRect.height + spacing) position = 'bottom';
    if (spaceRight > ttRect.width + spacing && rect.left < 50) position = 'right'; // linke Sidebar
    if (spaceLeft > ttRect.width + spacing && rect.right > window.innerWidth - 50) position = 'left'; // rechte Sidebar

    let top, left;

    switch(position) {
      case 'top':
        top = rect.top - ttRect.height - spacing;
        left = rect.left + rect.width/2 - ttRect.width/2;
        Object.assign(arrow.style, {
          top: '100%',
          left: '50%',
          transform: 'translateX(-50%) rotate(0deg)'
        });
        break;
      case 'bottom':
        top = rect.bottom + spacing;
        left = rect.left + rect.width/2 - ttRect.width/2;
        Object.assign(arrow.style, {
          top: '-6px',
          left: '50%',
          transform: 'translateX(-50%) rotate(180deg)'
        });
        break;
      case 'right':
        top = rect.top + rect.height/2 - ttRect.height/2;
        left = rect.right + spacing;
        Object.assign(arrow.style, {
          top: '50%',
          left: '-6px',
          transform: 'translateY(-50%) rotate(90deg)'
        });
        break;
      case 'left':
        top = rect.top + rect.height/2 - ttRect.height/2;
        left = rect.left - ttRect.width - spacing;
        Object.assign(arrow.style, {
          top: '50%',
          left: '100%',
          transform: 'translateY(-50%) rotate(-90deg)'
        });
        break;
    }

    // Clamp an Viewport
    if (left < 4) left = 4;
    if (left + ttRect.width > window.innerWidth - 4)
      left = window.innerWidth - ttRect.width - 4;
    if (top < 4) top = 4;
    if (top + ttRect.height > window.innerHeight - 4)
      top = window.innerHeight - ttRect.height - 4;

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

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