Fix setting help hover tooltip to show descriptions instead of question mark

app.py

@@ -270,6 +270,7 @@ APP_CSS = """
 }
 
 .setting-help-q {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -286,6 +287,37 @@ APP_CSS = """
   line-height: 1;
   vertical-align: middle;
 }
+
+.setting-help-q::after {
+  content: attr(data-help);
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 0.4rem);
+  transform: translateX(-50%);
+  min-width: 180px;
+  max-width: 320px;
+  padding: 0.42rem 0.55rem;
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  background: color-mix(in srgb, var(--bg-surface) 98%, transparent);
+  color: var(--text-main);
+  font-size: 0.74rem;
+  font-weight: 500;
+  line-height: 1.25;
+  box-shadow: var(--shadow);
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+  transition: opacity 120ms ease;
+  z-index: 50;
+  white-space: normal;
+}
+
+.setting-help-q:hover::after,
+.setting-help-q:focus-visible::after {
+  opacity: 1;
+  visibility: visible;
+}
 """
 
 THEME_JS = """
@@ -377,7 +409,9 @@ SETTING_HELP_JS = """
     const q = document.createElement("span");
     q.className = "setting-help-q";
     q.textContent = "?";
-    q.title = match[1];
+    q.setAttribute("data-help", match[1]);
+    q.setAttribute("aria-label", match[1]);
+    q.tabIndex = 0;
     label.appendChild(q);
   }
   return [];