Difference between revisions of "Template:Tt/sandbox"
From Detective Conan Wiki
| 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 | + | <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> | ||
Revision as of 22:07, 10 June 2025
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 + 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. 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);
});
