From a9428e0b02256abea7df54fa2d5fb16affdd314c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Tue, 14 Apr 2026 03:37:40 +0200
Subject: [PATCH] feat(studio): format info tooltip on export selector (#257)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

- Adds a hover tooltip (?) next to the format dropdown in the render queue export bar
- Shows the selected format's details (codec, use case) plus a comparison with the other two formats
- Helps users pick between MP4 (general), MOV/ProRes 4444 (transparent video for editors), and WebM/VP9 (transparent for web)

## Test plan

- [x] Open studio, go to the render queue panel
- [x] Hover over the (?) icon next to the format dropdown — tooltip appears above
- [x] Switch format in the dropdown — tooltip content updates to show the selected format first
- [x] Move pointer away — tooltip dismisses
- [x] Verify tooltip doesn't clip or overflow the panel

<img width="420" height="263" alt="image" src="https://github.com/user-attachments/assets/f4bd8bf7-65ed-45ab-ac53-577b4985fa34" />
---
 .../src/components/renders/RenderQueue.tsx    | 69 ++++++++++++++++++-
 1 file changed, 68 insertions(+), 1 deletion(-)

diff --git a/packages/studio/src/components/renders/RenderQueue.tsx b/packages/studio/src/components/renders/RenderQueue.tsx
index c269e112e..654028433 100644
--- a/packages/studio/src/components/renders/RenderQueue.tsx
+++ b/packages/studio/src/components/renders/RenderQueue.tsx
@@ -11,6 +11,72 @@ interface RenderQueueProps {
   isRendering: boolean;
 }
 
+const FORMAT_INFO: Record<"mp4" | "webm" | "mov", { label: string; desc: string }> = {
+  mp4: { label: "MP4", desc: "Best for general use. Smallest file, universal playback." },
+  mov: {
+    label: "MOV (ProRes 4444)",
+    desc: "Transparent video. Works in CapCut, Final Cut Pro, Premiere, DaVinci Resolve, After Effects. Large files.",
+  },
+  webm: {
+    label: "WebM (VP9)",
+    desc: "Transparent video for web. Smaller than MOV but limited editor support.",
+  },
+};
+
+function FormatInfoTooltip({ format }: { format: "mp4" | "webm" | "mov" }) {
+  const [open, setOpen] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  const show = () => {
+    clearTimeout(timeoutRef.current);
+    setOpen(true);
+  };
+  const hide = () => {
+    timeoutRef.current = setTimeout(() => setOpen(false), 120);
+  };
+
+  useEffect(() => () => clearTimeout(timeoutRef.current), []);
+
+  const info = FORMAT_INFO[format];
+
+  return (
+    <div className="relative" onPointerEnter={show} onPointerLeave={hide}>
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="text-neutral-600 hover:text-neutral-400 transition-colors cursor-help"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" />
+        <line x1="12" y1="17" x2="12.01" y2="17" />
+      </svg>
+      {open && (
+        <div className="absolute bottom-full right-0 mb-1.5 w-52 p-2 rounded bg-neutral-900 border border-neutral-700 shadow-lg z-50">
+          <p className="text-[10px] font-semibold text-neutral-200 mb-0.5">{info.label}</p>
+          <p className="text-[9px] text-neutral-400 leading-tight">{info.desc}</p>
+          <div className="mt-1.5 pt-1.5 border-t border-neutral-800">
+            {(["mp4", "mov", "webm"] as const)
+              .filter((f) => f !== format)
+              .map((f) => (
+                <p key={f} className="text-[9px] text-neutral-500 leading-relaxed">
+                  <span className="text-neutral-400 font-medium">{FORMAT_INFO[f].label}</span>
+                  {" — "}
+                  {FORMAT_INFO[f].desc}
+                </p>
+              ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
 function FormatExportButton({
   onStartRender,
   isRendering,
@@ -21,7 +87,8 @@ function FormatExportButton({
   const [format, setFormat] = useState<"mp4" | "webm" | "mov">("mp4");
 
   return (
-    <div className="flex items-center gap-0.5">
+    <div className="flex items-center gap-1">
+      <FormatInfoTooltip format={format} />
       <select
         value={format}
         onChange={(e) => setFormat(e.target.value as "mp4" | "webm" | "mov")}