Template:Tt/sandbox: Difference between revisions
mNo edit summary |
No edit summary |
||
| (6 intermediate revisions by 2 users not shown) | |||
| 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> | ||
<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> | |||
<br> | <br> | ||
<br> | <br> | ||
| Line 167: | Line 180: | ||
<br> | <br> | ||
<pre> | |||
// IMPORTANT: When testing using the browser console, remove the DOMContentLoaded event listener | |||
document.addEventListener("DOMContentLoaded", function () { | |||
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 how much the tooltip is outside the viewport | |||
var overflowTop = tooltipRect.top < 1; | |||
var spaceTop = targetRect.top > tooltipRect.height + 10; | |||
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. Shift tooltip into view if needed and move chevron accordingly | |||
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"); | |||
} | |||
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 = ""; | |||
} | |||
// 4. Hide it again until hover | |||
tooltipContainer.style.opacity = ""; | |||
tooltipContainer.style.display = ""; | |||
}); | |||
} | |||
// Run on page load, resize, and scroll | |||
adjustTooltipPositions(); | |||
window.addEventListener("resize", adjustTooltipPositions); | |||
window.addEventListener("scroll", adjustTooltipPositions, true); | |||
}); | |||
</pre> | |||
</noinclude> | </noinclude> | ||
Latest revision as of 12:50, 11 June 2025
// IMPORTANT: When testing using the browser console, remove the DOMContentLoaded event listener
document.addEventListener("DOMContentLoaded", function () {
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 how much the tooltip is outside the viewport
var overflowTop = tooltipRect.top < 1;
var spaceTop = targetRect.top > tooltipRect.height + 10;
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. Shift tooltip into view if needed and move chevron accordingly
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");
}
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 = "";
}
// 4. Hide it again until hover
tooltipContainer.style.opacity = "";
tooltipContainer.style.display = "";
});
}
// Run on page load, resize, and scroll
adjustTooltipPositions();
window.addEventListener("resize", adjustTooltipPositions);
window.addEventListener("scroll", adjustTooltipPositions, true);
});