<script>
let gxTooltipEl = null;
let gxTooltipActive = false;

document.addEventListener("DOMContentLoaded", () => {
    gxTooltipEl = document.createElement("div");
    gxTooltipEl.className = "gx-tooltip";
    document.body.appendChild(gxTooltipEl);

    document.querySelectorAll("[data-tooltip]").forEach(el => {
        el.addEventListener("mouseenter", () => gxShowTooltip(el));
        el.addEventListener("mouseleave", gxHideTooltip);
        el.addEventListener("mousemove", e => gxMoveTooltip(e));
        el.addEventListener("touchstart", () => gxShowTooltip(el));
        el.addEventListener("touchend", gxHideTooltip);
    });
});

function gxShowTooltip(el) {
    const text = el.getAttribute("data-tooltip");
    if (!text) return;

    gxTooltipEl.innerText = text;
    gxTooltipEl.classList.add("show");
    gxTooltipActive = true;
}

function gxHideTooltip() {
    gxTooltipActive = false;
    gxTooltipEl.classList.remove("show");
}

function gxMoveTooltip(e) {
    if (!gxTooltipActive) return;

    const padding = 12;
    gxTooltipEl.style.left = (e.clientX + padding) + "px";
    gxTooltipEl.style.top = (e.clientY + padding) + "px";
}
</script>
