From 406a6042b9319d3041429e530c171999ac47f381 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sat, 24 Jan 2026 21:51:50 -0800
Subject: [PATCH 1/2] fix(tooltip): add tooltip to canonical toggle button

---
 .../editor/components/sub-block/sub-block.tsx | 45 ++++++++++++-------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
index 274bba15be..4c39570a61 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
@@ -284,22 +284,35 @@ const renderLabel = (
           </>
         )}
         {showCanonicalToggle && (
-          <button
-            type='button'
-            className='flex h-[12px] w-[12px] flex-shrink-0 items-center justify-center bg-transparent p-0 disabled:cursor-not-allowed disabled:opacity-50'
-            onClick={canonicalToggle?.onToggle}
-            disabled={canonicalToggleDisabledResolved}
-            aria-label={canonicalToggle?.mode === 'advanced' ? 'Use selector' : 'Enter manual ID'}
-          >
-            <ArrowLeftRight
-              className={cn(
-                '!h-[12px] !w-[12px]',
-                canonicalToggle?.mode === 'advanced'
-                  ? 'text-[var(--text-primary)]'
-                  : 'text-[var(--text-secondary)]'
-              )}
-            />
-          </button>
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <button
+                type='button'
+                className='flex h-[12px] w-[12px] flex-shrink-0 items-center justify-center bg-transparent p-0 disabled:cursor-not-allowed disabled:opacity-50'
+                onClick={canonicalToggle?.onToggle}
+                disabled={canonicalToggleDisabledResolved}
+                aria-label={
+                  canonicalToggle?.mode === 'advanced' ? 'Use selector' : 'Enter manual ID'
+                }
+              >
+                <ArrowLeftRight
+                  className={cn(
+                    '!h-[12px] !w-[12px]',
+                    canonicalToggle?.mode === 'advanced'
+                      ? 'text-[var(--text-primary)]'
+                      : 'text-[var(--text-secondary)]'
+                  )}
+                />
+              </button>
+            </Tooltip.Trigger>
+            <Tooltip.Content side='top'>
+              <p>
+                {canonicalToggle?.mode === 'advanced'
+                  ? 'Switch to selector'
+                  : 'Switch to manual ID'}
+              </p>
+            </Tooltip.Content>
+          </Tooltip.Root>
         )}
       </div>
     </div>

From 1384e03e97cd974cd333cb34e79e0a39d85ac174 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sat, 24 Jan 2026 21:57:48 -0800
Subject: [PATCH 2/2] ack comments

---
 .../components/editor/components/sub-block/sub-block.tsx      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
index 4c39570a61..017a51c0b5 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
@@ -292,7 +292,9 @@ const renderLabel = (
                 onClick={canonicalToggle?.onToggle}
                 disabled={canonicalToggleDisabledResolved}
                 aria-label={
-                  canonicalToggle?.mode === 'advanced' ? 'Use selector' : 'Enter manual ID'
+                  canonicalToggle?.mode === 'advanced'
+                    ? 'Switch to selector'
+                    : 'Switch to manual ID'
                 }
               >
                 <ArrowLeftRight