MediaWiki:Common.js - Revision history

Jonatanktk at 23:59, 1 November 2025

2025-11-01T23:59:38Z

← Older revision		Revision as of 23:59, 1 November 2025
Line 20:		Line 20:
	pointerEvents: 'none',		pointerEvents: 'none',
	opacity: '0',		opacity: '0',
	transition: 'opacity 0.25s, transform 0.~~15s~~',		transform: 'translateY(4px)',
			transition: 'opacity 0.25s ease, transform 0.25s ease',
	boxShadow: '0 4px 12px rgba(0,0,0,0.3)',		boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
	backdropFilter: 'blur(6px)',		backdropFilter: 'blur(6px)',
	color: '#fff',		backgroundColor: 'var(--citizen-tooltip-bg, rgba(25,25,25,0.95))',
			color: 'var(--citizen-tooltip-text, #fff)',
	});		});
	document.body.appendChild(tooltip);		document.body.appendChild(tooltip);

	// Pfeil ~~erstellen~~		// Pfeil
	const arrow = document.createElement('div');		const arrow = document.createElement('div');
	Object.assign(arrow.style, {		Object.assign(arrow.style, {
Line 35:		Line 37:
	borderLeft: '7px solid transparent',		borderLeft: '7px solid transparent',
	borderRight: '7px solid transparent',		borderRight: '7px solid transparent',
	borderTop: '7px solid ~~#000~~', ~~// Farbe wird unten angepasst~~		borderTop: '7px solid var(--citizen-tooltip-bg, rgba(25,25,25,0.95))',
	pointerEvents: 'none',		pointerEvents: 'none',
	});		});
Line 55:		Line 57:
	tooltip.appendChild(arrow);		tooltip.appendChild(arrow);
	tooltip.style.opacity = '0';		tooltip.style.opacity = '0';
			tooltip.style.transform = 'translateY(4px)';

	// ~~Dark~~/~~Light Mode automatisch~~		// Animation / Bounce
	~~const isDark = document.body.classList.contains('skin-dark') \|\| document.documentElement.classList.contains('skin-dark');~~
	~~tooltip.style.backgroundColor = isDark ? 'rgba(25,25,25,0.95)' : 'rgba(250,250,250,0.95)';~~
	~~tooltip.style.color = isDark ? '#fff' : '#111';~~
	~~arrow.style.borderTopColor = tooltip.style.backgroundColor;~~

	requestAnimationFrame(() => {		requestAnimationFrame(() => {
	positionTooltip(el);		positionTooltip(el);
	tooltip.style.opacity = '1';		tooltip.style.opacity = '1';
			tooltip.style.transform = 'translateY(0)';
	});		});

Line 73:		Line 72:
	if (!activeEl) return;		if (!activeEl) return;
	tooltip.style.opacity = '0';		tooltip.style.opacity = '0';
			tooltip.style.transform = 'translateY(4px)';
	activeEl.setAttribute('title', storedTitle);		activeEl.setAttribute('title', storedTitle);
	activeEl = null;		activeEl = null;
Line 88:		Line 88:
	const spaceRight = window.innerWidth - rect.right;		const spaceRight = window.innerWidth - rect.right;

	~~// Default oben~~
	let position = 'top';		let position = 'top';
	if (spaceAbove < ttRect.height + spacing && spaceBelow > ttRect.height + spacing) position = 'bottom';		if (spaceAbove < ttRect.height + spacing && spaceBelow > ttRect.height + spacing) position = 'bottom';
	if (spaceRight > ttRect.width + spacing && rect.left < 50) position = 'right'; ~~// linke Sidebar~~		if (spaceRight > ttRect.width + spacing && rect.left < 50) position = 'right';
	if (spaceLeft > ttRect.width + spacing && rect.right > window.innerWidth - 50) position = 'left'; ~~// rechte Sidebar~~		if (spaceLeft > ttRect.width + spacing && rect.right > window.innerWidth - 50) position = 'left';

	let top, left;		let top, left;

Jonatanktk at 23:56, 1 November 2025

2025-11-01T23:56:15Z

← Older revision		Revision as of 23:56, 1 November 2025
Line 6:		Line 6:
	'use strict';		'use strict';

			// Tooltip erstellen
	const tooltip = document.createElement('div');		const tooltip = document.createElement('div');
			tooltip.id = 'citizen-tooltip';
	Object.assign(tooltip.style, {		Object.assign(tooltip.style, {
	position: 'absolute',		position: 'absolute',
	zIndex: 999999,		zIndex: 999999,
	~~background~~: '~~rgba(20,20,20,0.95)~~',		padding: '10px 14px',
	~~color~~: '~~#fff~~',		borderRadius: '8px',
	~~padding~~: '~~8px 12px~~',		maxWidth: '240px',
	~~borderRadius~~: '~~6px~~',		wordWrap: 'break-word',
	fontSize: '13px',		fontSize: '13px',
	lineHeight: '1.4',		lineHeight: '1.4',
	~~maxWidth: '220px',~~
	~~wordWrap: 'break-word',~~
	pointerEvents: 'none',		pointerEvents: 'none',
	opacity: '0',		opacity: '0',
	transition: 'opacity 0.2s, transform 0.15s',		transition: 'opacity 0.25s, transform 0.15s',
			boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
			backdropFilter: 'blur(6px)',
			color: '#fff',
	});		});
	document.body.appendChild(tooltip);		document.body.appendChild(tooltip);

			// Pfeil erstellen
	const arrow = document.createElement('div');		const arrow = document.createElement('div');
	Object.assign(arrow.style, {		Object.assign(arrow.style, {
Line 29:		Line 33:
	width: '0',		width: '0',
	height: '0',		height: '0',
	borderLeft: '~~6px~~ solid transparent',		borderLeft: '7px solid transparent',
	borderRight: '~~6px~~ solid transparent',		borderRight: '7px solid transparent',
	borderTop: '~~6px~~ solid ~~rgba(20,20,20,0.95)~~',		borderTop: '7px solid #000', // Farbe wird unten angepasst
	pointerEvents: 'none',		pointerEvents: 'none',
	});		});
Line 51:		Line 55:
	tooltip.appendChild(arrow);		tooltip.appendChild(arrow);
	tooltip.style.opacity = '0';		tooltip.style.opacity = '0';

			// Dark/Light Mode automatisch
			const isDark = document.body.classList.contains('skin-dark') \|\| document.documentElement.classList.contains('skin-dark');
			tooltip.style.backgroundColor = isDark ? 'rgba(25,25,25,0.95)' : 'rgba(250,250,250,0.95)';
			tooltip.style.color = isDark ? '#fff' : '#111';
			arrow.style.borderTopColor = tooltip.style.backgroundColor;

	requestAnimationFrame(() => {		requestAnimationFrame(() => {
Line 71:		Line 81:
	const rect = el.getBoundingClientRect();		const rect = el.getBoundingClientRect();
	const ttRect = tooltip.getBoundingClientRect();		const ttRect = tooltip.getBoundingClientRect();
	const spacing = 6;		const spacing = 8;

	const spaceAbove = rect.top;		const spaceAbove = rect.top;
Line 78:		Line 88:
	const spaceRight = window.innerWidth - rect.right;		const spaceRight = window.innerWidth - rect.right;

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

	~~// Platz prüfen~~
	if (spaceAbove < ttRect.height + spacing && spaceBelow > ttRect.height + spacing) position = 'bottom';		if (spaceAbove < ttRect.height + spacing && spaceBelow > ttRect.height + spacing) position = 'bottom';
	if (spaceRight > ttRect.width + spacing && rect.left < 50) position = 'right'; // linke Sidebar		if (spaceRight > ttRect.width + spacing && rect.left < 50) position = 'right'; // linke Sidebar
Line 87:		Line 95:

	let top, left;		let top, left;

	switch(position) {		switch(position) {
	case 'top':		case 'top':
Line 102:		Line 109:
	left = rect.left + rect.width/2 - ttRect.width/2;		left = rect.left + rect.width/2 - ttRect.width/2;
	Object.assign(arrow.style, {		Object.assign(arrow.style, {
	top: '-~~6px~~',		top: '-7px',
	left: '50%',		left: '50%',
	transform: 'translateX(-50%) rotate(180deg)'		transform: 'translateX(-50%) rotate(180deg)'
Line 112:		Line 119:
	Object.assign(arrow.style, {		Object.assign(arrow.style, {
	top: '50%',		top: '50%',
	left: '-~~6px~~',		left: '-7px',
	transform: 'translateY(-50%) rotate(90deg)'		transform: 'translateY(-50%) rotate(90deg)'
	});		});

Jonatanktk at 23:54, 1 November 2025

2025-11-01T23:54:44Z

@@ Line 4: / Line 4: @@
 (function() {
    const tooltip = document.createElement('div');
    Object.assign(tooltip.style, {
@@ Line 46: / Line 48: @@
      activeEl = el;
      el.removeAttribute('title');
      tooltip.textContent = storedTitle;
      tooltip.appendChild(arrow);
      tooltip.style.opacity = '0';
      requestAnimationFrame(() => {
        positionTooltip(el);
@@ Line 73: / Line 73: @@
      const spacing = 6;
-     let top = rect.bottom + spacing;
+     const spaceAbove = rect.top;
-     let left = rect.left + rect.width/2 - ttRect.width/2;
+    const spaceBelow = window.innerHeight - rect.bottom;
-     // Kollision mit Viewport
+     switch(position) {
-    if (top + ttRect.height > window.innerHeight) {
+      case 'top':
-       top = rect.top - ttRect.height - spacing; // nach oben
+        top = rect.top - ttRect.height - spacing;
+     }
      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`;
+   }
    document.addEventListener('mouseover', showTooltip);
 })();

Jonatanktk at 23:52, 1 November 2025

2025-11-01T23:52:41Z

Show changes

Jonatanktk at 23:51, 1 November 2025

2025-11-01T23:51:08Z

← Older revision		Revision as of 23:51, 1 November 2025
Line 25:		Line 25:
	document.body.appendChild(tooltip);		document.body.appendChild(tooltip);

	~~// Pfeil erstellen~~
	const arrow = document.createElement('div');		const arrow = document.createElement('div');
	Object.assign(arrow.style, {		Object.assign(arrow.style, {
Line 48:		Line 47:

	activeEl = el;		activeEl = el;
	el.removeAttribute('title'); // ~~Native~~ verhindern		el.removeAttribute('title'); // native verhindern

			// Tooltip vorbereiten, aber noch unsichtbar
	tooltip.textContent = storedTitle;		tooltip.textContent = storedTitle;
	tooltip.appendChild(arrow); ~~// Pfeil wieder anhängen~~		tooltip.appendChild(arrow);
	tooltip.style.opacity = '1';		tooltip.style.opacity = '0';
			tooltip.style.transform = 'translateY(0)';

	~~positionTooltip(el);~~		// Force Reflow um korrekte Größe zu bekommen
	~~el.addEventListener('mouseleave', hideTooltip, { once: true });~~		tooltip.getBoundingClientRect();
	~~el.addEventListener('mousemove', e => {}, { passive: true });~~ // ~~optional, falls du hover-updates brauchst~~
	}

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

	~~function positionTooltip(el) {~~		// Position berechnen
	const rect = el.getBoundingClientRect();		const rect = el.getBoundingClientRect();
	const ttRect = tooltip.getBoundingClientRect();		const ttRect = tooltip.getBoundingClientRect();
	const spacing = 6;		const spacing = 6;
			let top, left;

	~~let top, left;~~
	const spaceAbove = rect.top;		const spaceAbove = rect.top;
	const spaceBelow = window.innerHeight - rect.bottom;		const spaceBelow = window.innerHeight - rect.bottom;
Line 77:		Line 69:
	const spaceLeft = rect.left;		const spaceLeft = rect.left;

	// ~~Standard~~: ~~Tooltip über dem Element~~		// Intelligente Position: genug Platz bevorzugen
	let position = '~~top~~';		let position = 'bottom';
			if (spaceAbove > ttRect.height + spacing) position = 'top';
	if (~~spaceBelow~~ > ttRect.height + spacing) position = '~~bottom~~';
	else if (spaceRight > ttRect.width + spacing) position = 'right';		else if (spaceRight > ttRect.width + spacing) position = 'right';
	else if (spaceLeft > ttRect.width + spacing) position = 'left';		else if (spaceLeft > ttRect.width + spacing) position = 'left';

	switch(position) {		switch (position) {
	case 'top':		case 'top':
	top = rect.top - ttRect.height - spacing;		top = rect.top - ttRect.height - spacing;
Line 91:		Line 82:
	top: '100%',		top: '100%',
	left: '50%',		left: '50%',
	transform: 'translateX(-50%)',		transform: 'translateX(-50%) rotate(0deg)',
	borderTopColor: 'rgba(20,20,20,0.95)',		borderTopColor: 'rgba(20,20,20,0.95)',
	~~borderBottom: 'none',~~
	});		});
	break;		break;
Line 104:		Line 94:
	transform: 'translateX(-50%) rotate(180deg)',		transform: 'translateX(-50%) rotate(180deg)',
	borderTopColor: 'rgba(20,20,20,0.95)',		borderTopColor: 'rgba(20,20,20,0.95)',
	~~borderBottom: 'none',~~
	});		});
	break;		break;
Line 115:		Line 104:
	transform: 'translateY(-50%) rotate(90deg)',		transform: 'translateY(-50%) rotate(90deg)',
	borderTopColor: 'rgba(20,20,20,0.95)',		borderTopColor: 'rgba(20,20,20,0.95)',
	~~borderBottom: 'none',~~
	});		});
	break;		break;
Line 126:		Line 114:
	transform: 'translateY(-50%) rotate(-90deg)',		transform: 'translateY(-50%) rotate(-90deg)',
	borderTopColor: 'rgba(20,20,20,0.95)',		borderTopColor: 'rgba(20,20,20,0.95)',
	~~borderBottom: 'none',~~
	});		});
	break;		break;
	}		}

	// ~~Kollision mit~~ Viewport ~~korrigieren~~		// Clamp an Viewport
	if (left < 4) left = 4;		if (left < 4) left = 4;
	if (left + ttRect.width > window.innerWidth - 4)		if (left + ttRect.width > window.innerWidth - 4)
Line 141:		Line 128:
	tooltip.style.top = top + 'px';		tooltip.style.top = top + 'px';
	tooltip.style.left = left + 'px';		tooltip.style.left = left + 'px';
			tooltip.style.opacity = '1';

			// Verstecken bei Mouseleave
			el.addEventListener('mouseleave', hideTooltip, { once: true });
			}

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

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

Jonatanktk at 23:49, 1 November 2025

2025-11-01T23:49:39Z

Show changes

Jonatanktk at 23:46, 1 November 2025

2025-11-01T23:46:01Z

← Older revision		Revision as of 23:46, 1 November 2025
Line 8:		Line 8:
	// Tooltip erstellen		// Tooltip erstellen
	const tooltip = document.createElement('div');		const tooltip = document.createElement('div');
	tooltip.id = 'mw-~~custom~~-tooltip';		tooltip.id = 'mw-global-tooltip';
	Object.assign(tooltip.style, {		Object.assign(tooltip.style, {
	position: 'fixed',		position: 'fixed',
	zIndex: ~~9999~~,		zIndex: 999999,
	background: 'rgba(20,20,20,0.9)',		background: 'rgba(0,0,0,0.85)',
	color: '#fff',		color: '#fff',
	padding: '~~6px~~ 10px',		padding: '5px 10px',
	borderRadius: '~~6px~~',		borderRadius: '5px',
	fontSize: '~~13px',~~		fontSize: '12px',
	~~lineHeight: '1.3~~',		pointerEvents: 'none', // Wichtig: blockiert keine Klicks
	pointerEvents: 'none',
	opacity: '0',		opacity: '0',
	transition: 'opacity 0.15s ~~ease~~, transform 0.1s ~~ease~~',		transition: 'opacity 0.15s, transform 0.1s',
	transform: 'translateY(4px)',		transform: 'translateY(4px)',
			whiteSpace: 'nowrap'
	});		});
	document.body.appendChild(tooltip);		document.body.appendChild(tooltip);

	let activeEl = null;		let activeEl = null;
			let storedTitle = null;

	~~document.addEventListener~~(~~'mouseover',~~ e => {		// Tooltip anzeigen
	const ~~target~~ = e.target.closest('[~~alt~~]');		function showTooltip(e) {
	if (!~~target~~) return;		const el = e.target.closest('[title]');
			if (!el) return;

	activeEl = ~~target~~;		activeEl = el;
	~~tooltip.textContent~~ = ~~target~~.getAttribute('~~alt~~');		storedTitle = el.getAttribute('title');
			if (!storedTitle) return;

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

	// Tooltip ~~Position beim Bewegen~~		moveTooltip(e);
	~~const move = ev =>~~ {
	~~const offset = 14~~;		el.addEventListener('mousemove', moveTooltip);
	~~let x = ev.clientX +~~ offset;		el.addEventListener('mouseleave', hideTooltip, { once: true });
	~~let y~~ = ~~ev.clientY + offset~~;		}
	const rect = tooltip.getBoundingClientRect();
	~~const maxX~~ = ~~window~~.~~innerWidth - rect.width - 10;~~		// Tooltip bewegen
	~~const maxY = window.innerHeight - rect.height - 10;~~		function moveTooltip(e) {
	~~tooltip.style.left = Math.min(x, maxX)~~ + ~~'px'~~;		if (!activeEl) return;
	~~tooltip.style.top~~ = ~~Math~~.~~min(y, maxY)~~ + ~~'px';~~		const offset = 12;
	};		const rect = tooltip.getBoundingClientRect();
			let x = e.clientX + offset;
			let y = e.clientY + offset;

	~~move~~(e); // ~~Position initial setzen~~		const maxX = window.innerWidth - rect.width - 10;
	~~target~~.addEventListener('~~mousemove~~', ~~move~~);		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);

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

Jonatanktk at 23:44, 1 November 2025

2025-11-01T23:44:27Z

← Older revision		Revision as of 23:44, 1 November 2025
Line 6:		Line 6:
	'use strict';		'use strict';

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

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

	~~function showTooltip~~(e) {		document.addEventListener('mouseover', e => {
	const el = e.~~currentTarget;~~		const target = e.target.closest('[alt]');
	~~const text = el~~.~~getAttribute~~('alt');		if (!target) return;
	if (!~~text~~) return;

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

	~~function moveTooltip(e) {~~		// Tooltip Position beim Bewegen
	~~if (!activeEl) return;~~		const move = ev => {
	const offset = 14;		const offset = 14;
	let x = e.clientX + offset;		let x = ev.clientX + offset;
	let y = e.clientY + 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';
			};

	~~const rect = tooltip.getBoundingClientRect~~();		move(e); // Position initial setzen
	~~const maxX = window~~.~~innerWidth - rect.width - 10;~~		target.addEventListener('mousemove', move);
	~~const maxY = window.innerHeight - rect.height - 10~~;

	~~tooltip.style.left = Math.min(x, maxX) + 'px';~~		// Mouseleave
	~~tooltip~~.~~style.top = Math.min~~(~~y, maxY) +~~ 'px';		target.addEventListener('mouseleave', () => {
	}		tooltip.style.opacity = '0';
			tooltip.style.transform = 'translateY(4px)';
	~~function hideTooltip~~() {		target.removeEventListener('mousemove', move);
	~~activeEl = null;~~		activeEl = null;
	tooltip.style.opacity = '0';		}, { once: true });
	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~~);
	})();		})();

Jonatanktk at 23:42, 1 November 2025

2025-11-01T23:42:48Z

← Older revision		Revision as of 23:42, 1 November 2025
Line 1:		Line 1:
	/* Any JavaScript here will be loaded for all users on every page load. */		/* 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);
			})();

Jonatanktk: Replaced content with "/* Any JavaScript here will be loaded for all users on every page load. */"

2025-11-01T23:39:28Z

Replaced content with "Any JavaScript here will be loaded for all users on every page load.: "

← Older revision		Revision as of 23:39, 1 November 2025
Line 1:		Line 1:
	/* Any JavaScript here will be loaded for all users on every page load. */		/* Any JavaScript here will be loaded for all users on every page load. */
	~~(function () {~~
	~~const tooltip = document.createElement("div");~~
	~~tooltip.className = "custom-tooltip";~~
	~~document.body.appendChild(tooltip);~~

	~~let active = null;~~
	~~let storedTitle = null;~~

	~~function showTooltip(target, x, y) {~~
	~~const text = target.getAttribute("alt") \|\| target.getAttribute("title");~~
	~~if (!text) return;~~

	~~// Browser-Tooltip deaktivieren~~
	~~if (target.hasAttribute("title")) {~~
	~~storedTitle = target.getAttribute("title");~~
	~~target.removeAttribute("title");~~
	}

	~~tooltip.textContent = text;~~
	~~tooltip.style.display = "block";~~

	~~const updatePosition = (cx, cy) => {~~
	~~const rect = tooltip.getBoundingClientRect();~~
	~~const offset = 12;~~
	~~let left = cx + offset;~~
	~~let top = cy + offset;~~
	~~if (left + rect.width > window.innerWidth - 10)~~
	~~left = cx - rect.width - offset;~~
	~~if (top + rect.height > window.innerHeight - 10)~~
	~~top = cy - rect.height - offset;~~
	~~tooltip.style.left = `${left}px`;~~
	~~tooltip.style.top = `${top}px`;~~
	};

	~~const moveHandler = e => updatePosition(e.clientX, e.clientY);~~
	~~updatePosition(x, y);~~
	~~document.addEventListener("mousemove", moveHandler);~~

	~~target.addEventListener(~~
	~~"mouseleave",~~
	~~() => {~~
	~~tooltip.classList.remove("visible");~~
	~~tooltip.style.display = "none";~~
	~~document.removeEventListener("mousemove", moveHandler);~~
	~~if (storedTitle) {~~
	~~target.setAttribute("title", storedTitle);~~
	~~storedTitle = null;~~
	}
	~~active = null;~~
	},
	~~{ once: true }~~
	);

	~~requestAnimationFrame(() => tooltip.classList.add("visible"));~~
	}

	~~// Globaler Mouseover – auch für nachgeladene Elemente~~
	~~document.addEventListener("mouseover", e => {~~
	~~const target = e.target.closest("[title], [alt]");~~
	~~if (!target \|\| active === target) return;~~
	~~active = target;~~
	~~const x = e.clientX;~~
	~~const y = e.clientY;~~
	~~showTooltip(target, x, y);~~
	~~});~~

	~~// optional: bei DOM-Änderungen Tooltips neu aktivieren (z. B. wenn Skin-Module UI nachladen)~~
	~~const observer = new MutationObserver(() => {~~
	~~// nichts zu tun – der Eventlistener ist global, aber dies stellt sicher, dass der Tooltip-Container immer oben bleibt~~
	~~document.body.appendChild(tooltip);~~
	~~});~~
	~~observer.observe(document.body, { childList: true, subtree: true });~~
	~~})();~~