Skip to content

fix(blocks): render tooltip field in sub-block label#4073

Open
minijeong-log wants to merge 2 commits intosimstudioai:stagingfrom
minijeong-log:fix/sub-block-tooltip-rendering-v2
Open

fix(blocks): render tooltip field in sub-block label#4073
minijeong-log wants to merge 2 commits intosimstudioai:stagingfrom
minijeong-log:fix/sub-block-tooltip-rendering-v2

Conversation

@minijeong-log
Copy link
Copy Markdown
Contributor

@minijeong-log minijeong-log commented Apr 9, 2026

Summary

  • SubBlockConfig.tooltip was typed in blocks/types.ts (added in commit 8215a81) but never rendered in sub-block.tsx
  • Adds an Info icon next to the field label that shows the tooltip text on hover
  • Reuses the existing Tooltip.Root/Trigger/Content pattern already present in the same file

Changes

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx

  • Add Info to lucide-react imports
  • Render tooltip icon after the required asterisk in renderLabel

Test plan

  • Add tooltip: 'some help text' to a subBlock in any block config
  • Open the workflow editor and find that block
  • Verify an Info icon appears next to the field label
  • Hover over the icon and verify the tooltip text appears

Fixes #4071

@cursor
Copy link
Copy Markdown

cursor bot commented Apr 9, 2026

PR Summary

Low Risk
Small, UI-only change limited to label rendering and tooltip triggers with minimal behavioral impact.

Overview
Sub-block labels now render SubBlockConfig.tooltip by showing an Info icon next to the field title that displays the tooltip text on hover using the existing Tooltip pattern.

Also makes the tooltip trigger wrappers keyboard-focusable (adds tabIndex/role) for the new tooltip icon and the existing invalid-JSON warning icon.

Reviewed by Cursor Bugbot for commit 4891982. Bugbot is set up for automated code reviews on this repo. Configure here.

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 9, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Skipped Skipped Apr 9, 2026 7:13am

Request Review

@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps bot commented Apr 9, 2026

Greptile Summary

This PR wires up the previously unrendered SubBlockConfig.tooltip field by adding an Info icon tooltip trigger inside the renderLabel function in sub-block.tsx, reusing the same Tooltip.Root/Trigger/Content pattern already present in the file for the AlertTriangle JSON-validation indicator.

Confidence Score: 5/5

Safe to merge — minimal, well-scoped change that follows established patterns in the file.

The only finding is a P2 accessibility suggestion (missing tabIndex on the tooltip trigger span), which also applies to the pre-existing AlertTriangle trigger. No logic, data, or security concerns.

No files require special attention.

Vulnerabilities

No security concerns identified.

Important Files Changed

Filename Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx Adds conditional Info-icon tooltip rendering in renderLabel when config.tooltip is set; follows the existing AlertTriangle tooltip pattern exactly.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[renderLabel called] --> B{config.title?}
    B -- No --> Z[return null]
    B -- Yes --> C{config.type === 'switch'?}
    C -- Yes --> Z
    C -- No --> D[Render Label container]
    D --> E[Render title text]
    E --> F{required?}
    F -- Yes --> G[Render asterisk span]
    F -- No --> H
    G --> H{config.tooltip?}
    H -- Yes --> I[Render Info icon + Tooltip.Root]
    H -- No --> J
    I --> J[Render labelSuffix]
    J --> K{code + JSON + invalid?}
    K -- Yes --> L[Render AlertTriangle + Tooltip.Root]
    K -- No --> M[Render action buttons]
    L --> M
Loading

Reviews (1): Last reviewed commit: "fix(blocks): render tooltip field in sub..." | Re-trigger Greptile

Comment on lines +255 to +258
<Tooltip.Trigger asChild>
<span className='inline-flex'>
<Info className='h-3 w-3 flex-shrink-0 cursor-pointer text-muted-foreground' />
</span>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Tooltip trigger not keyboard-accessible

The <span> wrapping the Info icon has no tabIndex, so keyboard-only users cannot focus it to trigger the tooltip. Adding tabIndex={0} (and a matching role) makes it reachable via Tab. Note: the existing AlertTriangle trigger below uses the same pattern, so this affects both.

Suggested change
<Tooltip.Trigger asChild>
<span className='inline-flex'>
<Info className='h-3 w-3 flex-shrink-0 cursor-pointer text-muted-foreground' />
</span>
<span className='inline-flex' tabIndex={0} role='button'>

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in:

  • e2b2206 — added tabIndex={0} and role='button' to the Info tooltip trigger
  • 4891982 — also applied the same fix to the existing AlertTriangle trigger as noted

Signed-off-by: Mini Jeong <mini.jeong@navercorp.com>
Signed-off-by: Mini Jeong <mini.jeong@navercorp.com>
@minijeong-log minijeong-log force-pushed the fix/sub-block-tooltip-rendering-v2 branch from 589d26d to 4891982 Compare April 9, 2026 07:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant