Add asset to type whitelist

browser_tests/tests/vueNodes/interactions/node/tooltips.spec.ts

@@ -0,0 +1,26 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '@e2e/fixtures/ComfyPage'
+
+test.describe('@vue-nodes tooltips', async () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.EnableTooltips', true)
+    await comfyPage.settings.setSetting('LiteGraph.Node.TooltipDelay', 0)
+  })
+
+  test('widget value tooltips', async ({ comfyPage }) => {
+    const tooltip = comfyPage.page.locator('.p-tooltip-text')
+    await comfyPage.vueNodes.getWidgetByName('load check', 'ckpt_name').hover()
+    await expect(tooltip, 'displays for combos').toContainText('v1-5-pruned')
+
+    await comfyPage.vueNodes.getWidgetByName('ksampler', 'seed').hover()
+    await expect(tooltip, 'displays for numbers').toContainText('15668')
+
+    await comfyPage.vueNodes.getNodeLocator('6').getByLabel('text').hover()
+    await expect(tooltip).toBeVisible()
+    await expect(tooltip, "doesn't display for prompts").not.toContainText(
+      'purple galaxy bottle'
+    )
+  })
+})

src/renderer/extensions/vueNodes/composables/useProcessedWidgets.ts

@@ -44,6 +44,13 @@ import {
   getLocatorIdFromNodeData
 } from '@/utils/graphTraversalUtil'
 
+const TOOLTIP_VALUE_TYPES: Readonly<string[]> = [
+  'asset',
+  'combo',
+  'number',
+  'text'
+]
+
 interface ProcessedWidget {
   advanced: boolean
   handleContextMenu: (e: PointerEvent) => void
@@ -65,7 +72,7 @@ interface ProcessedWidget {
 }
 
 interface WidgetUiCallbacks {
-  getTooltipConfig: (widget: SafeWidgetData) => TooltipOptions
+  getTooltipConfig: (widget: SafeWidgetData, fullVal?: string) => TooltipOptions
   handleNodeRightClick: (e: PointerEvent, nodeId: string) => void
 }
 
@@ -316,7 +323,11 @@ export function computeProcessedWidgets({
       executionErrorStore
     )
 
-    const tooltipConfig = ui.getTooltipConfig(widget)
+    const valueTooltip =
+      TOOLTIP_VALUE_TYPES.includes(widget.type) && String(value).length > 10
+        ? String(value)
+        : undefined
+    const tooltipConfig = ui.getTooltipConfig(widget, valueTooltip)
     const handleContextMenu = (e: PointerEvent) => {
       e.preventDefault()
       e.stopPropagation()
@@ -372,7 +383,10 @@ export function useProcessedWidgets(
   const { getWidgetTooltip, createTooltipConfig } = useNodeTooltips(nodeType)
 
   const ui: WidgetUiCallbacks = {
-    getTooltipConfig: (widget) => createTooltipConfig(getWidgetTooltip(widget)),
+    getTooltipConfig: (widget, fullValue = '') =>
+      createTooltipConfig(
+        [getWidgetTooltip(widget), fullValue].join('\n\n').trim()
+      ),
     handleNodeRightClick
   }
 

src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue

@@ -34,7 +34,7 @@
             <span
               :class="
                 cn(
-                  'min-w-[4ch] flex-1 truncate pr-3 pl-1 text-left',
+                  'min-w-[4ch] flex-1 truncate pl-1 text-left',
                   $slots.default && 'mr-5'
                 )
               "
@@ -42,12 +42,12 @@
               {{ selectedLabel || placeholder || '\u00a0' }}
             </span>
             <span
-              class="flex h-full w-8 shrink-0 items-center justify-center rounded-r-lg"
+              class="flex h-full w-5 shrink-0 items-center justify-center rounded-r-lg"
             >
               <i
                 :class="
                   cn(
-                    'icon-[lucide--chevron-down] size-4 translate-x-1.5',
+                    'icon-[lucide--chevron-down]',
                     disabled
                       ? 'bg-component-node-foreground-secondary'
                       : 'bg-muted-foreground'