Template:Tt/sandbox: Difference between revisions
No edit summary |
No edit summary |
||
| (4 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 168: | Line 181: | ||
<pre> | <pre> | ||
// IMPORTANT: When testing using the browser console, remove the DOMContentLoaded event listener | |||
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 | // 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 + | 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); | ||
// 3. | // 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 212: | ||
tooltipContainer.classList.remove("ttt-container-below"); | tooltipContainer.classList.remove("ttt-container-below"); | ||
} | } | ||
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 223: | ||
chevron.style.transform = ""; | chevron.style.transform = ""; | ||
} | } | ||
// | // 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); | ||
}); | |||
</pre> | </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);
});