Difference between revisions of "Template:Tt/sandbox"
From Detective Conan Wiki
(Code update) |
|||
| (3 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 () { | document.addEventListener("DOMContentLoaded", function () { | ||
var tooltips = document.querySelectorAll(".ttt-container"); | var tooltips = document.querySelectorAll(".ttt-container"); | ||
| Line 186: | Line 200: | ||
// 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 + | + | 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); | ||
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);
});
