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