Template:Tt/sandbox - Revision history

R0o0di at 12:50, 11 June 2025

2025-06-11T12:50:42Z

← Older revision		Revision as of 12:50, 11 June 2025
Line 100:		Line 100:
	}		}
	/* END OF HOVER ANIMATION CLASSES */		/* END OF HOVER ANIMATION CLASSES */
	}}</includeonly><noinclude><code>tt/sandbox </code> We love {{tt/sandbox\|DC\|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>		}}</includeonly><noinclude>
			<code>tt/sandbox </code> We love {{tt/sandbox\|DC\|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>

			<code>tt/sandbox </code> We love {{tt/sandbox\|DC\|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>

			<code>tt/sandbox </code> We love {{tt/sandbox\|DC\|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>

			<code>tt</code> {{tt\|DC\|Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan <ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>

			<code>tt</code> {{tt\|DC\|Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan <ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>

	<code>tt</code> {{tt\|DC\|Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan <ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>		<code>tt</code> {{tt\|DC\|Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan <ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>


	<br>		<br>
	<br>		<br>

AvidConanContributor at 22:56, 10 June 2025

2025-06-10T22:56:18Z

← Older revision		Revision as of 22:56, 10 June 2025
Line 170:		Line 170:

	<pre>		<pre>
			// IMPORTANT: When testing using the browser console, remove the DOMContentLoaded event listener
	document.addEventListener("DOMContentLoaded", function () {		document.addEventListener("DOMContentLoaded", function () {
	var tooltips = document.querySelectorAll(".ttt-container");		var tooltips = document.querySelectorAll(".ttt-container");
Line 188:		Line 189:
	// 2. Measure how much the tooltip is outside the viewport		// 2. Measure how much the tooltip is outside the viewport
	var overflowTop = tooltipRect.top < 1;		var overflowTop = tooltipRect.top < 1;
	var spaceTop = targetRect.top > tooltipRect.height + 4;		var spaceTop = targetRect.top > tooltipRect.height + 10;
	var overflowLeft = Math.min(Math.max(0, -tooltipRect.left), 0.5 * tooltipRect.width - 15);		var overflowLeft = Math.min(Math.max(0, -tooltipRect.left), 0.5 * tooltipRect.width - 15);
	var overflowRight = Math.min(Math.max(0, tooltipRect.right - document.documentElement.clientWidth), 0.5 * tooltipRect.width - 15);		var overflowRight = Math.min(Math.max(0, tooltipRect.right - document.documentElement.clientWidth), 0.5 * tooltipRect.width - 15);

R0o0di at 22:07, 10 June 2025

2025-06-10T22:07:42Z

← Older revision		Revision as of 22:07, 10 June 2025
Line 100:		Line 100:
	}		}
	/* END OF HOVER ANIMATION CLASSES */		/* END OF HOVER ANIMATION CLASSES */
	}}</includeonly><noinclude>tt/sandbox We love {{tt/sandbox\|DC\|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>		}}</includeonly><noinclude><code>tt/sandbox </code> We love {{tt/sandbox\|DC\|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>

	tt ~~We love~~ {{tt\|DC\|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>		<code>tt</code> {{tt\|DC\|Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan <ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>
	<br>		<br>
	<br>		<br>

R0o0di at 22:02, 10 June 2025

2025-06-10T22:02:33Z

← Older revision		Revision as of 22:02, 10 June 2025
Line 100:		Line 100:
	}		}
	/* END OF HOVER ANIMATION CLASSES */		/* END OF HOVER ANIMATION CLASSES */
	}}</includeonly><noinclude>We love {{tt/sandbox\|DC\|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>		}}</includeonly><noinclude>tt/sandbox We love {{tt/sandbox\|DC\|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>

			tt We love {{tt\|DC\|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>
	<br>		<br>
	<br>		<br>

AvidConanContributor: Code update

2025-06-10T21:52:47Z

Code update

← Older revision		Revision as of 21:52, 10 June 2025
Line 168:		Line 168:

	<pre>		<pre>
			document.addEventListener("DOMContentLoaded", function () {
	var tooltips = document.querySelectorAll(".ttt-container");		var tooltips = document.querySelectorAll(".ttt-container");

	function adjustTooltipPositions() {		function adjustTooltipPositions() {
	Array.prototype.forEach.call(tooltips, function (tooltipContainer) {		Array.prototype.forEach.call(tooltips, function (tooltipContainer) {
	var tooltip = tooltipContainer.querySelector(".ttt-tooltip");		var tooltip = tooltipContainer.querySelector(".ttt-tooltip");
	var chevron = tooltip.querySelector(".ttt-chevron");		var chevron = tooltip.querySelector(".ttt-chevron");

	// 1. Temporarily show tooltip to measure size		// 1. Temporarily show tooltip to measure size
	tooltipContainer.style.opacity = "0";		tooltipContainer.style.opacity = "0";
	tooltipContainer.style.display = "flex";		tooltipContainer.style.display = "flex";
	tooltip.style.transform = "";		tooltip.style.transform = "";

	var tooltipRect = tooltip.getBoundingClientRect();		var tooltipRect = tooltip.getBoundingClientRect();
	var targetRect = tooltipContainer.parentElement.getBoundingClientRect();		var targetRect = tooltipContainer.parentElement.getBoundingClientRect();

	// 2. Measure ~~overflow~~		// 2. Measure how much the tooltip is outside the viewport
	var overflowTop = tooltipRect.top < 1;		var overflowTop = tooltipRect.top < 1;
	var spaceTop = targetRect.top > tooltipRect.height + 4;		var spaceTop = targetRect.top > tooltipRect.height + 4;

	var overflowLeft = Math.min(Math.max(0, -tooltipRect.left), 0.5 * tooltipRect.width - 15);		var overflowLeft = Math.min(Math.max(0, -tooltipRect.left), 0.5 * tooltipRect.width - 15);
	var overflowRight = Math.min(Math.max(0, tooltipRect.right - document.documentElement.clientWidth), 0.5 * tooltipRect.width - 15);		var overflowRight = Math.min(Math.max(0, tooltipRect.right - document.documentElement.clientWidth), 0.5 * tooltipRect.width - 15);

	// 3. ~~Reposition top/bottom~~		// 3. Shift tooltip into view if needed and move chevron accordingly
	if (overflowTop) {		if (overflowTop) {
	tooltipContainer.classList.remove("ttt-container-above");		tooltipContainer.classList.remove("ttt-container-above");
Line 198:		Line 198:
	tooltipContainer.classList.remove("ttt-container-below");		tooltipContainer.classList.remove("ttt-container-below");
	}		}

	~~// 4. Reposition left/right~~
	if (overflowLeft > 0) {		if (overflowLeft > 0) {
	tooltip.style.transform = "translateX(calc(" + overflowLeft + "px + 4px))";		tooltip.style.transform = "translateX(calc(" + overflowLeft + "px + 4px))";
Line 210:		Line 209:
	chevron.style.transform = "";		chevron.style.transform = "";
	}		}

	// 5. ~~Restore styles~~		// 4. Hide it again until hover
	tooltipContainer.style.opacity = "";		tooltipContainer.style.opacity = "";
	tooltipContainer.style.display = "";		tooltipContainer.style.display = "";
	});		});
	}		}

	// Run on page load, resize, scroll		// Run on page load, resize, and scroll
	adjustTooltipPositions();		adjustTooltipPositions();
	window.addEventListener("resize", adjustTooltipPositions);		window.addEventListener("resize", adjustTooltipPositions);
	window.addEventListener("scroll", adjustTooltipPositions, true);		window.addEventListener("scroll", adjustTooltipPositions, true);
			});

	~~// ADDITIONAL CODE FROM CHATGPT THAT FIXES ISSUE ON MOBILE (i think)~~
	~~// Also run when tooltip is triggered via interaction~~
	~~function onShow(e) {~~
	~~var target = e.target.closest ? e.target.closest(".ttt-target") : null;~~
	~~if (!target) return;~~

	~~var tooltipContainer = target.querySelector(".ttt-container");~~
	~~if (!tooltipContainer) return;~~

	~~tooltipContainer.style.display = "flex";~~
	~~adjustTooltipPositions();~~
	}

	~~document.addEventListener("touchstart", onShow~~);
	</pre>		</pre>
	</noinclude>		</noinclude>

R0o0di at 21:38, 10 June 2025

2025-06-10T21:38:53Z

← Older revision		Revision as of 21:38, 10 June 2025
Line 167:		Line 167:
	<br>		<br>

			<pre>
			var tooltips = document.querySelectorAll(".ttt-container");

			function adjustTooltipPositions() {
			Array.prototype.forEach.call(tooltips, function (tooltipContainer) {
			var tooltip = tooltipContainer.querySelector(".ttt-tooltip");
			var chevron = tooltip.querySelector(".ttt-chevron");

			// 1. Temporarily show tooltip to measure size
			tooltipContainer.style.opacity = "0";
			tooltipContainer.style.display = "flex";
			tooltip.style.transform = "";

			var tooltipRect = tooltip.getBoundingClientRect();
			var targetRect = tooltipContainer.parentElement.getBoundingClientRect();

			// 2. Measure overflow
			var overflowTop = tooltipRect.top < 1;
			var spaceTop = targetRect.top > tooltipRect.height + 4;

			var overflowLeft = Math.min(Math.max(0, -tooltipRect.left), 0.5 * tooltipRect.width - 15);
			var overflowRight = Math.min(Math.max(0, tooltipRect.right - document.documentElement.clientWidth), 0.5 * tooltipRect.width - 15);

			// 3. Reposition top/bottom
			if (overflowTop) {
			tooltipContainer.classList.remove("ttt-container-above");
			tooltipContainer.classList.add("ttt-container-below");
			} else if (spaceTop) {
			tooltipContainer.classList.add("ttt-container-above");
			tooltipContainer.classList.remove("ttt-container-below");
			}

			// 4. Reposition left/right
			if (overflowLeft > 0) {
			tooltip.style.transform = "translateX(calc(" + overflowLeft + "px + 4px))";
			chevron.style.transform = "translateX(calc(-50% - " + overflowLeft + "px - 4px))";
			} else if (overflowRight > 0) {
			tooltip.style.transform = "translateX(calc(-" + overflowRight + "px - 4px))";
			chevron.style.transform = "translateX(calc(-50% + " + overflowRight + "px + 4px))";
			} else {
			tooltip.style.transform = "";
			chevron.style.transform = "";
			}

			// 5. Restore styles
			tooltipContainer.style.opacity = "";
			tooltipContainer.style.display = "";
			});
			}

			// Run on page load, resize, scroll
			adjustTooltipPositions();
			window.addEventListener("resize", adjustTooltipPositions);
			window.addEventListener("scroll", adjustTooltipPositions, true);


			// ADDITIONAL CODE FROM CHATGPT THAT FIXES ISSUE ON MOBILE (i think)
			// Also run when tooltip is triggered via interaction
			function onShow(e) {
			var target = e.target.closest ? e.target.closest(".ttt-target") : null;
			if (!target) return;

			var tooltipContainer = target.querySelector(".ttt-container");
			if (!tooltipContainer) return;

			tooltipContainer.style.display = "flex";
			adjustTooltipPositions();
			}

			document.addEventListener("touchstart", onShow);
			</pre>
	</noinclude>		</noinclude>

AvidConanContributor at 21:14, 10 June 2025

2025-06-10T21:14:47Z

← Older revision		Revision as of 21:14, 10 June 2025
Line 100:		Line 100:
	}		}
	/* END OF HOVER ANIMATION CLASSES */		/* END OF HOVER ANIMATION CLASSES */
	</includeonly><noinclude>We love {{tt/sandbox\|DC\|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>		}}</includeonly><noinclude>We love {{tt/sandbox\|DC\|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>
	<br>		<br>
	<br>		<br>

AvidConanContributor at 21:13, 10 June 2025

2025-06-10T21:13:16Z

← Older revision		Revision as of 21:13, 10 June 2025
Line 5:		Line 5:
	position: relative;		position: relative;
	display: inline-block;		display: inline-block;
	border-~~botttom~~: 0.0625em ~~dottted~~;		border-bottom: 0.0625em dotted;
	cursor: help;		cursor: help;
	}		}
Line 30:		Line 30:
	/* Container appear above target */		/* Container appear above target */
	.ttt-container-above {		.ttt-container-above {
	~~botttom~~: 90%;		bottom: 90%;
	transform: translate(-50%, 3px);		transform: translate(-50%, 3px);
	}		}
Line 77:		Line 77:
	/* When tooltip is below */		/* When tooltip is below */
	.ttt-container-below .ttt-chevron {		.ttt-container-below .ttt-chevron {
	~~botttom~~: calc(100% - 2px);		bottom: calc(100% - 2px);
	border-width: 0 9px 9px 9px;		border-width: 0 9px 9px 9px;
	border-color: transparent transparent #fff transparent;		border-color: transparent transparent #fff transparent;
Line 97:		Line 97:
	/* Text bold on hover */		/* Text bold on hover */
	.ttt-target:hover {		.ttt-target:hover {
	border-~~botttom~~: 0.0625em dashed;		border-bottom: 0.0625em dashed;
	}		}
	/* END OF HOVER ANIMATION CLASSES */		/* END OF HOVER ANIMATION CLASSES */
			</includeonly><noinclude>We love {{tt/sandbox\|DC\|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>
	}}</includeonly><noinclude>We love {{tt/sandbox\|DC\|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>
	<br>		<br>
	<br>		<br>

AvidConanContributor: Restored unique class names, replaced meaningless text with meaningless line breaks

2025-06-10T21:05:50Z

Restored unique class names, replaced meaningless text with meaningless line breaks

Show changes

AvidConanContributor at 21:00, 10 June 2025

2025-06-10T21:00:50Z

← Older revision		Revision as of 21:00, 10 June 2025
Line 102:		Line 102:

	}}</includeonly><noinclude>We love {{tt/sandbox\|DC\|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>		}}</includeonly><noinclude>We love {{tt/sandbox\|DC\|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>

	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

	Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.		Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.

	Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla.		Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla.

	Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat. Etiam eget dui. Aliquam erat volutpat. Sed at lorem in nunc porta tristique.		Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat. Etiam eget dui. Aliquam erat volutpat. Sed at lorem in nunc porta tristique.

	Proin nec augue. Quisque aliquam tempor magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ac magna. Maecenas odio dolor, vulputate vel, auctor ac, accumsan id, felis. Pellentesque cursus sagittis felis.		Proin nec augue. Quisque aliquam tempor magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ac magna. Maecenas odio dolor, vulputate vel, auctor ac, accumsan id, felis. Pellentesque cursus sagittis felis.
	</noinclude>		</noinclude>