diff --git a/frontend/src/components/Tooltip.tsx b/frontend/src/components/Tooltip.tsx
index 3c77373..3d2c68e 100644
--- a/frontend/src/components/Tooltip.tsx
+++ b/frontend/src/components/Tooltip.tsx
@@ -1,10 +1,13 @@
-import { useRef, useState, useSyncExternalStore } from "react";
+import { useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { createPortal } from "react-dom";
 import { hintsEnabled, subscribeHints } from "../lib/hints";
 
 type Side = "top" | "bottom";
 type Coords = { left: number; top: number; placement: Side };
 
+const MARGIN = 8;
+const MAX_HALF = 120; // half of the tooltip's max-w-[240px] — the widest it can get
+
 /** Wrap any element to show a short glass hint caption on hover — but only while the
  *  app-wide hints toggle (Settings → Appearance) is on. Rendered in a portal with
  *  fixed positioning so it is never clipped by an overflow/stacking ancestor. */
@@ -19,6 +22,7 @@ export default function Tooltip({
 }) {
   const enabled = useSyncExternalStore(subscribeHints, hintsEnabled, hintsEnabled);
   const ref = useRef<HTMLSpanElement>(null);
+  const tipRef = useRef<HTMLDivElement>(null);
   const [coords, setCoords] = useState<Coords | null>(null);
 
   function show() {
@@ -27,8 +31,12 @@ export default function Tooltip({
     const r = el.getBoundingClientRect();
     // Prefer the requested side; flip to bottom if there's no room above.
     const placement: Side = side === "bottom" || r.top < 90 ? "bottom" : "top";
+    const center = r.left + r.width / 2;
+    // Clamp using the MAX half-width so the caption can never overflow the viewport, even on the
+    // first paint (before we know its real width). A left-edge anchor near x=0 would otherwise push
+    // the centered box off-screen. The layout effect below refines this to the actual width.
     setCoords({
-      left: Math.min(Math.max(r.left + r.width / 2, 92), window.innerWidth - 92),
+      left: Math.min(Math.max(center, MAX_HALF + MARGIN), window.innerWidth - MAX_HALF - MARGIN),
       top: placement === "top" ? r.top - 8 : r.bottom + 8,
       placement,
     });
@@ -37,6 +45,21 @@ export default function Tooltip({
     setCoords(null);
   }
 
+  // Once rendered, re-center on the anchor using the caption's ACTUAL width (a short hint doesn't
+  // need the full 240px reservation), still clamped inside the viewport.
+  useLayoutEffect(() => {
+    const tip = tipRef.current;
+    const el = ref.current;
+    if (!coords || !tip || !el) return;
+    const r = el.getBoundingClientRect();
+    const half = tip.offsetWidth / 2;
+    const left = Math.min(
+      Math.max(r.left + r.width / 2, half + MARGIN),
+      window.innerWidth - half - MARGIN
+    );
+    if (Math.abs(left - coords.left) > 0.5) setCoords((c) => (c ? { ...c, left } : c));
+  }, [coords]);
+
   if (!enabled || !hint) return <>{children}</>;
 
   return (
@@ -52,6 +75,7 @@ export default function Tooltip({
       {coords &&
         createPortal(
           <div
+            ref={tipRef}
             role="tooltip"
             style={{
               position: "fixed",