refactor(emcn): make the floating tooltip the one canonical Tooltip

Replace the Radix-based emcn Tooltip with the cursor-following floating tooltip so
every tooltip in the app uses one consistent style. Built on the shared
floating-tooltip engine (relocated into emcn), not a parallel implementation.

- Move the floating-tooltip engine into emcn/components/tooltip and export it from
  the barrel; re-point its consumers (FloatingOverflowText, resource-header)
- Extend the FloatingTooltip bubble to render arbitrary children (+ role/id for
  a11y) so it can back general tooltips, not just overflow text
- Rebuild emcn Tooltip (Root/Trigger/Content/Provider/Shortcut/Preview) on
  useFloatingTooltip — compound API preserved, ~350 call sites unchanged, legacy
  side/align props accepted and ignored (the tooltip follows the cursor). Removes
  @radix-ui/react-tooltip usage (package kept for a later cleanup; react-slot
  retained for asChild)

Note: general tooltips now show instantly (no hover delay) and follow the cursor.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: andresdjasso

apps/sim/app/workspace/[workspaceId]/components/resource/components/floating-overflow-text.tsx

@@ -2,13 +2,13 @@
 
 import type React from 'react'
 import { memo } from 'react'
-import { cn } from '@/lib/core/utils/cn'
 import {
   FloatingTooltip,
   isTextClipped,
   useFloatingTooltip,
   useIsOverflowing,
-} from '@/app/workspace/[workspaceId]/components/resource/components/floating-tooltip'
+} from '@/components/emcn'
+import { cn } from '@/lib/core/utils/cn'
 
 interface FloatingOverflowTextProps {
   /** Full text shown in the tooltip and used as the default visible content. */

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx

@@ -9,22 +9,20 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  FloatingTooltip,
   Plus,
   POPOVER_ANIMATION_CLASSES,
   Popover,
   PopoverAnchor,
   PopoverContent,
   PopoverItem,
   PopoverSection,
+  useFloatingTooltip,
+  useIsOverflowing,
 } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { InlineRenameInput } from '@/app/workspace/[workspaceId]/components/inline-rename-input'
 import { FloatingOverflowText } from '@/app/workspace/[workspaceId]/components/resource/components/floating-overflow-text'
-import {
-  FloatingTooltip,
-  useFloatingTooltip,
-  useIsOverflowing,
-} from '@/app/workspace/[workspaceId]/components/resource/components/floating-tooltip'
 
 const HEADER_PLUS_ICON = <Plus className='mr-1.5 size-[14px] text-[var(--text-icon)]' />
 

apps/sim/components/emcn/components/index.ts

@@ -183,5 +183,15 @@ export { Textarea } from './textarea/textarea'
 export { TimePicker, timePickerVariants } from './time-picker/time-picker'
 export { CountdownRing } from './toast/countdown-ring'
 export { ToastProvider, toast, useToast } from './toast/toast'
+export {
+  clamp,
+  FloatingTooltip,
+  type FloatingTooltipHandlers,
+  type FloatingTooltipState,
+  isFocusVisible,
+  isTextClipped,
+  useFloatingTooltip,
+  useIsOverflowing,
+} from './tooltip/floating-tooltip'
 export { Tooltip } from './tooltip/tooltip'
 export { Wizard } from './wizard/wizard'

…resource/components/floating-tooltip.tsx …/components/tooltip/floating-tooltip.tsxapps/sim/app/workspace/[workspaceId]/components/resource/components/floating-tooltip.tsx renamed to apps/sim/components/emcn/components/tooltip/floating-tooltip.tsx apps/sim/app/workspace/[workspaceId]/components/resource/components/floating-tooltip.tsx renamed to apps/sim/components/emcn/components/tooltip/floating-tooltip.tsx

@@ -214,26 +214,45 @@ export function isFocusVisible(element: Element): boolean {
  */
 export const FloatingTooltip = memo(function FloatingTooltip({
   label,
+  children,
   state,
+  className,
+  role,
+  id,
 }: {
-  label: string
+  /** Text shown when no `children` are provided (the overflow-tooltip case). */
+  label?: string
+  /** Arbitrary tooltip content; overrides `label` when provided (general tooltips). */
+  children?: React.ReactNode
   state: FloatingTooltipState
+  className?: string
+  /** Set to `"tooltip"` for described/general tooltips; omit for decorative overflow tooltips. */
+  role?: 'tooltip'
+  /** Element id, used to wire `aria-describedby` on the trigger for general tooltips. */
+  id?: string
 }) {
   if (typeof document === 'undefined' || !state.visible) return null
 
   return createPortal(
     <div
-      aria-hidden='true'
+      id={id}
+      role={role}
+      aria-hidden={role ? undefined : 'true'}
       className={cn(
         'pointer-events-none fixed top-0 left-0 z-[var(--z-tooltip)] w-fit max-w-[min(16rem,calc(100vw-2rem))] rounded-lg border border-[var(--border)] bg-[var(--bg)] px-2 py-1.5 text-[var(--text-body)] text-xs opacity-100 shadow-sm transition-[opacity,filter,transform] duration-150 ease-out',
-        'motion-reduce:transition-none'
+        'motion-reduce:transition-none',
+        className
       )}
       style={{
         transform: `${getTooltipTranslate(state)} skew(${state.skew}deg) scale(${state.scaleX}, ${state.scaleY})`,
         transformOrigin: state.alignX === 'left' ? '12px 12px' : 'calc(100% - 12px) 12px',
       }}
     >
-      <span className='block whitespace-normal break-words text-left leading-[18px]'>{label}</span>
+      {children ?? (
+        <span className='block whitespace-normal break-words text-left leading-[18px]'>
+          {label}
+        </span>
+      )}
     </div>,
     document.body
   )

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

@@ -1,66 +1,160 @@
 'use client'
 
 import * as React from 'react'
-import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { Slot } from '@radix-ui/react-slot'
+import {
+  FloatingTooltip,
+  type FloatingTooltipHandlers,
+  type FloatingTooltipState,
+  useFloatingTooltip,
+} from '@/components/emcn/components/tooltip/floating-tooltip'
 import { cn } from '@/lib/core/utils/cn'
 
 /**
- * Tooltip provider component that must wrap your app or tooltip usage area.
+ * Kept for API compatibility with the previous tooltip. The floating tooltip has no shared hover
+ * delay, so this is a passthrough — props are accepted but unused.
  */
 const Provider = ({
-  delayDuration = 400,
-  ...props
-}: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => (
-  <TooltipPrimitive.Provider delayDuration={delayDuration} {...props} />
-)
+  children,
+}: {
+  children: React.ReactNode
+  delayDuration?: number
+  skipDelayDuration?: number
+  disableHoverableContent?: boolean
+}) => <>{children}</>
+Provider.displayName = 'Tooltip.Provider'
 
-/**
- * Root tooltip component that wraps trigger and content.
- */
-const Root = TooltipPrimitive.Root
+const ALWAYS_SHOW = () => true
 
-/**
- * Trigger element that activates the tooltip on hover.
- */
-const Trigger = TooltipPrimitive.Trigger
+interface TooltipContextValue {
+  state: FloatingTooltipState
+  handlers: FloatingTooltipHandlers
+  contentId: string
+}
+
+const TooltipContext = React.createContext<TooltipContextValue | null>(null)
+
+function useTooltipContext(component: string): TooltipContextValue {
+  const context = React.useContext(TooltipContext)
+  if (!context) {
+    throw new Error(`Tooltip.${component} must be rendered within a Tooltip.Root`)
+  }
+  return context
+}
+
+interface RootProps {
+  children: React.ReactNode
+  /** Accepted for API compatibility; the floating tooltip has no hover delay. */
+  delayDuration?: number
+}
 
 /**
- * Tooltip content component with consistent styling.
+ * Root of a single tooltip. Coordinates a cursor-following floating bubble between its `Trigger`
+ * and `Content`.
  *
  * @example
  * ```tsx
  * <Tooltip.Root>
  *   <Tooltip.Trigger asChild>
  *     <Button>Hover me</Button>
  *   </Tooltip.Trigger>
- *   <Tooltip.Content>
- *     <p>Tooltip text</p>
- *   </Tooltip.Content>
+ *   <Tooltip.Content>Tooltip text</Tooltip.Content>
  * </Tooltip.Root>
  * ```
  */
-const Content = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 6, children, ...props }, ref) => (
-  <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      collisionPadding={8}
-      avoidCollisions
-      className={cn(
-        'z-[var(--z-tooltip)] max-w-[260px] rounded-[4px] bg-[var(--tooltip-bg)] px-2 py-[3.5px] text-white text-xs shadow-sm dark:text-black',
-        className
-      )}
-      {...props}
-    >
+function Root({ children }: RootProps) {
+  const contentId = React.useId()
+  const { state, handlers } = useFloatingTooltip(ALWAYS_SHOW)
+  const value = React.useMemo<TooltipContextValue>(
+    () => ({ state, handlers, contentId }),
+    [state, handlers, contentId]
+  )
+  return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>
+}
+Root.displayName = 'Tooltip.Root'
+
+function composeHandlers<E extends React.SyntheticEvent>(
+  theirHandler: ((event: E) => void) | undefined,
+  ourHandler: (event: E) => void
+) {
+  return (event: E) => {
+    theirHandler?.(event)
+    if (!event.defaultPrevented) ourHandler(event)
+  }
+}
+
+interface TriggerProps extends React.ComponentPropsWithoutRef<'button'> {
+  /** Merge tooltip behavior onto the single child element instead of rendering a button. */
+  asChild?: boolean
+}
+
+/**
+ * Element that activates the tooltip on hover/focus. Use `asChild` to project onto your own element.
+ */
+const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(
+  ({ asChild = false, ...props }, ref) => {
+    const ctx = useTooltipContext('Trigger')
+    const Comp = asChild ? Slot : 'button'
+
+    return (
+      <Comp
+        ref={ref as React.Ref<HTMLButtonElement>}
+        aria-describedby={ctx.state.visible ? ctx.contentId : undefined}
+        {...props}
+        onPointerEnter={composeHandlers(props.onPointerEnter, (event) =>
+          ctx.handlers.onPointerEnter(event)
+        )}
+        onPointerMove={composeHandlers(props.onPointerMove, (event) =>
+          ctx.handlers.onPointerMove(event)
+        )}
+        onPointerLeave={composeHandlers(props.onPointerLeave, () => ctx.handlers.onPointerLeave())}
+        onPointerDown={composeHandlers(props.onPointerDown, () => ctx.handlers.onPointerDown())}
+        onFocus={composeHandlers(props.onFocus, (event) => ctx.handlers.onFocus(event))}
+        onBlur={composeHandlers(props.onBlur, () => ctx.handlers.onBlur())}
+      />
+    )
+  }
+)
+Trigger.displayName = 'Tooltip.Trigger'
+
+interface ContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Legacy positioning props from the previous Radix tooltip. Accepted for drop-in compatibility
+   * but ignored — the tooltip now follows the cursor.
+   */
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  sideOffset?: number
+  align?: 'start' | 'center' | 'end'
+  alignOffset?: number
+  avoidCollisions?: boolean
+  collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>
+  collisionBoundary?: unknown
+  arrowPadding?: number
+  sticky?: 'partial' | 'always'
+  hideWhenDetached?: boolean
+  asChild?: boolean
+  forceMount?: boolean
+}
+
+/**
+ * Tooltip content, rendered in a cursor-following floating bubble.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip.Content>
+ *   <p>Tooltip text</p>
+ * </Tooltip.Content>
+ * ```
+ */
+function Content({ className, children }: ContentProps) {
+  const ctx = useTooltipContext('Content')
+  return (
+    <FloatingTooltip state={ctx.state} role='tooltip' id={ctx.contentId} className={className}>
       {children}
-      <TooltipPrimitive.Arrow className='fill-[var(--tooltip-bg)]' />
-    </TooltipPrimitive.Content>
-  </TooltipPrimitive.Portal>
-))
-Content.displayName = TooltipPrimitive.Content.displayName
+    </FloatingTooltip>
+  )
+}
+Content.displayName = 'Tooltip.Content'
 
 interface ShortcutProps {
   /** The keyboard shortcut keys to display (e.g., "⌘D", "⌘K") */