diff --git a/services/frontend/src/components/shell/nav-rail.tsx b/services/frontend/src/components/shell/nav-rail.tsx
index 4faa704b..040506d9 100644
--- a/services/frontend/src/components/shell/nav-rail.tsx
+++ b/services/frontend/src/components/shell/nav-rail.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { usePathname } from "next/navigation";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { isActivePath, navItems } from "@/lib/navigation";
 import { cn } from "@/lib/utils";
 
@@ -16,11 +17,35 @@ function NavItem({
   active: boolean;
   Icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
 }) {
+  const itemRef = useRef<HTMLAnchorElement>(null);
+  const [tipPos, setTipPos] = useState<{ top: number; left: number } | null>(null);
+  const [hovering, setHovering] = useState(false);
+
+  // Measure the item and position the tooltip via a Portal on document.body
+  // so it always paints above the main content (which has its own stacking
+  // contexts from backdrop-blur panels).
+  const showTooltip = () => {
+    const el = itemRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    setTipPos({ top: rect.top + rect.height / 2, left: rect.right + 10 });
+    setHovering(true);
+  };
+  const hideTooltip = () => {
+    setHovering(false);
+    setTipPos(null);
+  };
+
   return (
     <a
+      ref={itemRef}
       href={href}
       aria-label={label}
       aria-current={active ? "page" : undefined}
+      onMouseEnter={showTooltip}
+      onMouseLeave={hideTooltip}
+      onFocus={showTooltip}
+      onBlur={hideTooltip}
       className={cn(
         "nav-dock-item group relative flex size-9 items-center justify-center rounded-[8px] transition-all duration-150",
         active
@@ -32,9 +57,25 @@ function NavItem({
       {active && (
         <span className="absolute -left-[5px] h-3.5 w-[2px] rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
       )}
-      <span className="pointer-events-none absolute left-full z-50 ml-2.5 hidden whitespace-nowrap rounded-md border border-hairline bg-surface px-2 py-0.5 font-sans text-[11px] font-medium tracking-tight text-ink opacity-0 shadow-lg backdrop-blur-md transition-all group-hover:translate-x-0.5 group-hover:opacity-100 md:block">
-        {label}
-      </span>
+
+      {/* Tooltip — portalled to body so it never hides behind content */}
+      {hovering &&
+        tipPos &&
+        typeof document !== "undefined" &&
+        createPortal(
+          <span
+            role="tooltip"
+            className="pointer-events-none fixed z-[9999] translate-y-[-50%] whitespace-nowrap rounded-md border border-hairline bg-surface px-2.5 py-1 font-sans text-[11px] font-medium tracking-tight text-ink shadow-xl backdrop-blur-md"
+            style={{
+              top: tipPos.top,
+              left: tipPos.left,
+              animation: "fade-up 0.12s ease",
+            }}
+          >
+            {label}
+          </span>,
+          document.body,
+        )}
     </a>
   );
 }