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

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

* fix(tooltip): add preload=none and handle query strings in video detection

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx

@@ -16,6 +16,7 @@ import {
   ModalFooter,
   ModalHeader,
   Switch,
+  Tooltip,
 } from '@/components/emcn'
 import { signOut, useSession } from '@/lib/auth/auth-client'
 import { ANONYMOUS_USER_ID } from '@/lib/auth/constants'
@@ -375,7 +376,20 @@ export function General() {
       </div>
 
       <div className='flex items-center justify-between'>
-        <Label htmlFor='auto-connect'>Auto-connect on drop</Label>
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <Label htmlFor='auto-connect' className='cursor-help'>
+              Auto-connect on drop
+            </Label>
+          </Tooltip.Trigger>
+          <Tooltip.Content side='bottom' align='start'>
+            <p>Automatically connect blocks when dropped near each other</p>
+            <Tooltip.Preview
+              src='/tooltips/auto-connect-on-drop.mp4'
+              alt='Auto-connect on drop example'
+            />
+          </Tooltip.Content>
+        </Tooltip.Root>
         <Switch
           id='auto-connect'
           checked={settings?.autoConnect ?? true}
@@ -384,7 +398,20 @@ export function General() {
       </div>
 
       <div className='flex items-center justify-between'>
-        <Label htmlFor='error-notifications'>Workflow error notifications</Label>
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <Label htmlFor='error-notifications' className='cursor-help'>
+              Canvas error notifications
+            </Label>
+          </Tooltip.Trigger>
+          <Tooltip.Content side='bottom' align='start'>
+            <p>Show error popups on blocks when a workflow run fails</p>
+            <Tooltip.Preview
+              src='/tooltips/canvas-error-notification.mp4'
+              alt='Canvas error notification example'
+            />
+          </Tooltip.Content>
+        </Tooltip.Root>
         <Switch
           id='error-notifications'
           checked={settings?.errorNotificationsEnabled ?? true}

apps/sim/components/emcn/components/tooltip/tooltip.tsx

@@ -89,10 +89,71 @@ const Shortcut = ({ keys, className, children }: ShortcutProps) => (
 )
 Shortcut.displayName = 'Tooltip.Shortcut'
 
+interface PreviewProps {
+  /** The URL of the image, GIF, or video to display */
+  src: string
+  /** Alt text for the media */
+  alt?: string
+  /** Width of the preview in pixels */
+  width?: number
+  /** Height of the preview in pixels */
+  height?: number
+  /** Optional additional class names */
+  className?: string
+}
+
+const VIDEO_EXTENSIONS = ['.mp4', '.webm', '.ogg', '.mov'] as const
+
+/**
+ * Displays a preview image, GIF, or video within tooltip content.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip.Content>
+ *   <p>Canvas error notifications</p>
+ *   <Tooltip.Preview src="/tooltips/canvas-error-notification.mp4" alt="Error notification example" />
+ * </Tooltip.Content>
+ * ```
+ */
+const Preview = ({ src, alt = '', width = 240, height, className }: PreviewProps) => {
+  const pathname = src.toLowerCase().split('?')[0].split('#')[0]
+  const isVideo = VIDEO_EXTENSIONS.some((ext) => pathname.endsWith(ext))
+
+  return (
+    <div className={cn('mt-[4px] overflow-hidden rounded-[3px]', className)}>
+      {isVideo ? (
+        <video
+          src={src}
+          width={width}
+          height={height}
+          className='block max-w-full'
+          autoPlay
+          loop
+          muted
+          playsInline
+          preload='none'
+          aria-label={alt}
+        />
+      ) : (
+        <img
+          src={src}
+          alt={alt}
+          width={width}
+          height={height}
+          className='block max-w-full'
+          loading='lazy'
+        />
+      )}
+    </div>
+  )
+}
+Preview.displayName = 'Tooltip.Preview'
+
 export const Tooltip = {
   Root,
   Trigger,
   Content,
   Provider,
   Shortcut,
+  Preview,
 }