Template:Tt/sandbox

We love DCDetective Conan

    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 overflow
            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. Reposition top/bottom
            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");
            }

            // 4. Reposition left/right
            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 = "";
            }

            // 5. Restore styles
            tooltipContainer.style.opacity = "";
            tooltipContainer.style.display = "";
        });
    }

    // Run on page load, resize, scroll
    adjustTooltipPositions();
    window.addEventListener("resize", adjustTooltipPositions);
    window.addEventListener("scroll", adjustTooltipPositions, true);


// ADDITIONAL CODE FROM CHATGPT THAT FIXES ISSUE ON MOBILE (i think)
    // Also run when tooltip is triggered via interaction
    function onShow(e) {
        var target = e.target.closest ? e.target.closest(".ttt-target") : null;
        if (!target) return;

        var tooltipContainer = target.querySelector(".ttt-container");
        if (!tooltipContainer) return;

        tooltipContainer.style.display = "flex";
        adjustTooltipPositions();
    }

    document.addEventListener("touchstart", onShow);