Add Tooltip to Display Raw JSON for Each Visual Component

[SakshayMahna]

Description

We want to show a simple tooltip on hover that displays the raw JSON data used to render each visual block (Node, Include, Group, etc.). This helps with debugging and understanding what data is being passed to each block.

Goals

• When a user hovers over a block, a small tooltip should appear with the raw input JSON (formatted and readable).
• This should apply consistently across all component types, one by one.

Implementation Notes

• Add a shared utility function like attachJsonTooltip(element, data) that
  • Creates a floating <div class="tooltip"> on hover.
  • Shows formatted JSON (JSON.stringify(data, null, 2)).
  • Auto hides on mouse leave.
  • Add a .tooltip CSS class to style the popup (example, small font, light background, monospace font).
  • Integrate it into each component renderer (Node, Include, Group, etc.)

Subtasks

You can implement this tooltip feature one component at a time:

• Add tooltip to Node blocks
• Add tooltip to Include blocks
• Add tooltip to GroupAction blocks
• Add tooltip to ComposableNode blocks
• Add tooltip to OpaqueFunction blocks
• Add tooltip to LaunchArgument blocks
• Add tooltip to EnvironmentVariable blocks
• Add tooltip to EventHandler blocks
• Add tooltip to TimerAction blocks
• Add tooltip to PythonExpression blocks

Testing

We already have Playwright visual and interaction tests. You can:

• Verify the tooltip appears on hover
• Assert its contents (e.g., "package":, "executable":)
• Optional: add a snapshot for the hover state

If you are unsure where to start or how to inject the tooltip for a component, comment here or reach out on Discord