feat(settings): add video tooltip previews for canvas settings

[waleedlatif1]

Summary

• Renamed "Workflow error notifications" to "Canvas error notifications" for clarity
• Added video tooltip previews to "Auto-connect on drop" and "Canvas error notifications" settings
• Extended Tooltip.Preview component to support video files (mp4, webm, ogg, mov)

Type of Change

• New feature

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[cursor]

PR Summary

Low Risk
Low risk UI-only change that adds tooltip content and media previews; primary risk is broken/missing static media paths or minor layout/perf regressions from autoplaying videos.

Overview
Adds hover tooltips to the Auto-connect on drop and Canvas error notifications toggles in workspace general settings, including short explanatory text and embedded preview videos.

Extends the shared Tooltip component with Tooltip.Preview, which auto-detects common video extensions and renders either an autoplaying muted <video> or a lazy-loaded <img> preview.

^{Written by Cursor Bugbot for commit ffa535e. Configure here.}

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Mar 24, 2026 11:44pm

[greptile-apps]

Greptile Summary

This PR adds video tooltip previews to the "Auto-connect on drop" and "Canvas error notifications" settings in the General settings panel, and renames "Workflow error notifications" to "Canvas error notifications" for clarity.

Key changes:

• A new Tooltip.Preview sub-component added to tooltip.tsx that renders either an <img> or <video> based on the file extension, with proper extension detection (query-param/hash-fragment stripping) and deferred loading via preload='none'.
• Two settings labels in general.tsx are now wrapped in Tooltip.Root/Trigger/Content with the new Preview component pointing to the bundled .mp4 files.
• Two new .mp4 demo files added under public/tooltips/.

The previously flagged issues (missing preload='none' and query-string breaking video detection) have both been addressed. The only remaining minor concern is that the height prop defaults to undefined, leaving the browser without reserved space for the video before it plays, which can cause a small layout shift when the tooltip first opens.

Confidence Score: 5/5

• Safe to merge; prior concerns have been resolved and remaining feedback is non-blocking style.
• Both previously flagged issues (preload='none' and URL query-string handling) have been fixed. The implementation is clean, accessible (aria-label, muted, playsInline), and follows existing component patterns. The only remaining note is the missing default height causing a possible layout shift, which is a cosmetic UX concern rather than a functional bug.
• No files require special attention.

Important Files Changed

Filename	Overview
apps/sim/components/emcn/components/tooltip/tooltip.tsx	Added Preview component supporting images, GIFs, and videos (mp4/webm/ogg/mov). Extension detection correctly strips query params and hash fragments; preload='none' defers network requests; autoPlay/muted/loop/playsInline set for UX. Missing explicit height means no reserved space for video, which may cause a tooltip resize/layout shift when the video's dimensions become known after autoplay starts.
apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx	Added Tooltip import and wrapped the "Auto-connect on drop" and "Canvas error notifications" labels with Tooltip.Root/Trigger/Content/Preview. Renames "Workflow error notifications" to "Canvas error notifications". Implementation looks correct; Label for binding is preserved through asChild.

Sequence Diagram

sequenceDiagram
    participant User
    participant Label as Tooltip Trigger Label
    participant Content as Tooltip Content
    participant Preview as Tooltip Preview
    participant Browser

    User->>Label: Hover
    Label->>Content: Show tooltip via Radix portal
    Content->>Preview: Render with src .mp4
    Preview->>Preview: Detect extension after stripping query and hash
    alt isVideo
        Preview->>Browser: Render video element with preload=none autoPlay muted loop
        Browser->>Browser: autoPlay triggers load and playback
    else isImage
        Preview->>Browser: Render img element with loading=lazy
    end
    User->>Label: Mouse leave
    Label->>Content: Hide tooltip and unmount portal
    Browser->>Browser: Video element destroyed and playback stops

Loading

_{Reviews (2): Last reviewed commit: "fix(tooltip): add preload=none and handl..." | Re-trigger Greptile}

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[cursor]

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR