Fix help tooltips: floating body tooltip with fallback title for question-mark hints

app.py

@@ -288,12 +288,11 @@ APP_CSS = """
   vertical-align: middle;
 }
 
-.setting-help-q::after {
-  content: attr(data-help);
-  position: absolute;
-  left: 50%;
-  bottom: calc(100% + 0.4rem);
-  transform: translateX(-50%);
+.setting-help-tooltip {
+  position: fixed;
+  left: 0;
+  top: 0;
+  transform: translate(-50%, -100%);
   min-width: 180px;
   max-width: 320px;
   padding: 0.42rem 0.55rem;
@@ -306,15 +305,14 @@ APP_CSS = """
   line-height: 1.25;
   box-shadow: var(--shadow);
   opacity: 0;
-  pointer-events: none;
   visibility: hidden;
   transition: opacity 120ms ease;
-  z-index: 50;
+  z-index: 10000;
+  pointer-events: none;
   white-space: normal;
 }
 
-.setting-help-q:hover::after,
-.setting-help-q:focus-visible::after {
+.setting-help-tooltip.is-visible {
   opacity: 1;
   visibility: visible;
 }
@@ -397,22 +395,69 @@ SETTING_HELP_JS = """
     ["Upload incomplete shard buffers", "On crawl finish/stop, flush the current partial shard buffer and upload it too."],
   ];
 
+  const tooltipId = "setting-help-tooltip";
+  let tooltip = document.getElementById(tooltipId);
+  if (!tooltip) {
+    tooltip = document.createElement("div");
+    tooltip.id = tooltipId;
+    tooltip.className = "setting-help-tooltip";
+    document.body.appendChild(tooltip);
+  }
+
+  const placeTooltip = (target) => {
+    const rect = target.getBoundingClientRect();
+    const aboveTop = rect.top - 10;
+
+    tooltip.style.left = `${rect.left + (rect.width / 2)}px`;
+    if (aboveTop < 44) {
+      tooltip.style.top = `${rect.bottom + 10}px`;
+      tooltip.style.transform = "translate(-50%, 0)";
+    } else {
+      tooltip.style.top = `${rect.top - 10}px`;
+      tooltip.style.transform = "translate(-50%, -100%)";
+    }
+  };
+
+  const showTooltip = (target) => {
+    const message = target.getAttribute("data-help") || "";
+    if (!message) return;
+    tooltip.textContent = message;
+    placeTooltip(target);
+    tooltip.classList.add("is-visible");
+  };
+
+  const hideTooltip = () => {
+    tooltip.classList.remove("is-visible");
+  };
+
   const clean = (value) => String(value || "").replace(/\\s+/g, " ").trim();
   const labels = document.querySelectorAll(".gradio-container label");
 
   for (const label of labels) {
-    if (label.querySelector(".setting-help-q")) continue;
     const text = clean(label.textContent);
     const match = helpByPrefix.find(([prefix]) => text.startsWith(prefix));
     if (!match) continue;
 
-    const q = document.createElement("span");
-    q.className = "setting-help-q";
-    q.textContent = "?";
+    let q = label.querySelector(".setting-help-q");
+    if (!q) {
+      q = document.createElement("span");
+      q.className = "setting-help-q";
+      q.textContent = "?";
+      label.appendChild(q);
+    }
+
     q.setAttribute("data-help", match[1]);
     q.setAttribute("aria-label", match[1]);
+    q.setAttribute("title", match[1]);
     q.tabIndex = 0;
-    label.appendChild(q);
+
+    if (!q.hasAttribute("data-help-bound")) {
+      q.addEventListener("mouseenter", () => showTooltip(q));
+      q.addEventListener("mouseleave", hideTooltip);
+      q.addEventListener("focus", () => showTooltip(q));
+      q.addEventListener("blur", hideTooltip);
+      q.setAttribute("data-help-bound", "1");
+    }
   }
   return [];
 }