diff --git a/packages/workflow-renderer/src/lib/overflow-span.tsx b/packages/workflow-renderer/src/lib/overflow-span.tsx
new file mode 100644
index 00000000000..65437f0d8a5
--- /dev/null
+++ b/packages/workflow-renderer/src/lib/overflow-span.tsx
@@ -0,0 +1,25 @@
+import { FloatingTooltip, isTextClipped, useFloatingTooltip } from '@sim/emcn'
+
+interface OverflowSpanProps {
+  value: string
+  className: string
+}
+
+/**
+ * Truncated span that reveals its full value in a floating tooltip when — and
+ * only when — the text is actually clipped. Never use a native `title`
+ * attribute here: on the canvas it pops the browser's raw, unstyled tooltip
+ * with the full untruncated value (including raw code/JSON) over the graph.
+ */
+export function OverflowSpan({ value, className }: OverflowSpanProps) {
+  const { state, handlers } = useFloatingTooltip(isTextClipped)
+
+  return (
+    <>
+      <span className={className} {...handlers}>
+        {value}
+      </span>
+      <FloatingTooltip label={value} state={state} />
+    </>
+  )
+}
diff --git a/packages/workflow-renderer/src/workflow-block/sub-block-row-view.tsx b/packages/workflow-renderer/src/workflow-block/sub-block-row-view.tsx
index 01930cdcac1..7be0b0bb7b6 100644
--- a/packages/workflow-renderer/src/workflow-block/sub-block-row-view.tsx
+++ b/packages/workflow-renderer/src/workflow-block/sub-block-row-view.tsx
@@ -1,4 +1,5 @@
 import { cn } from '@sim/emcn'
+import { OverflowSpan } from '../lib/overflow-span'
 
 /**
  * Props for the pure subblock summary row. The container resolves the value —
@@ -22,22 +23,18 @@ export interface SubBlockRowViewProps {
 export function SubBlockRowView({ title, displayValue, isMonospace }: SubBlockRowViewProps) {
   return (
     <div className='flex items-center gap-2'>
-      <span
+      <OverflowSpan
+        value={title}
         className='min-w-0 truncate text-[var(--text-tertiary)] text-sm capitalize'
-        title={title}
-      >
-        {title}
-      </span>
+      />
       {displayValue !== undefined && (
-        <span
+        <OverflowSpan
+          value={displayValue}
           className={cn(
             'flex-1 truncate text-right text-[var(--text-primary)] text-sm',
             isMonospace && 'font-mono'
           )}
-          title={displayValue}
-        >
-          {displayValue}
-        </span>
+        />
       )}
     </div>
   )
diff --git a/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx b/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
index 3b7dbb36cec..cf43c63796d 100644
--- a/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
+++ b/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
@@ -2,6 +2,7 @@ import type { ComponentType, ReactNode, Ref } from 'react'
 import { Badge, cn, handleKeyboardActivation, Tooltip } from '@sim/emcn'
 import { Handle, Position } from 'reactflow'
 import { HANDLE_POSITIONS } from '../dimensions'
+import { OverflowSpan } from '../lib/overflow-span'
 import { tileIconColorClass } from '../lib/tile-icon-color'
 import type { BlockRunStatus } from '../types'
 import { SubBlockRowView } from './sub-block-row-view'
@@ -212,15 +213,13 @@ export function WorkflowBlockView({
                 )}
               />
             </div>
-            <span
+            <OverflowSpan
+              value={name}
               className={cn(
                 'truncate font-medium text-md',
                 !isEnabled && runPathStatus !== 'success' && 'text-[var(--text-muted)]'
               )}
-              title={name}
-            >
-              {name}
-            </span>
+            />
           </div>
           <div className='relative z-10 flex flex-shrink-0 items-center gap-1'>
             {isWorkflowSelector &&