From 51f0f111ea122cd28bedf1665ef4d4af9439c1e8 Mon Sep 17 00:00:00 2001
From: Simula_r <18093452+simula-r@users.noreply.github.com>
Date: Mon, 6 Oct 2025 14:45:53 -0700
Subject: [PATCH] refactor: remove unused tooltip appendTo code (#5943)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Remove unused tooltip appendTo positioning code.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5943-refactor-remove-unused-tooltip-appendTo-code-2846d73d365081d99c00cd41e35eb496)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Jake Schroeder <jake.schroeder@isophex.com>
---
 .../vueNodes/components/InputSlot.vue         |  7 +---
 .../vueNodes/components/LGraphNode.vue        |  3 +-
 .../vueNodes/components/NodeHeader.test.ts    |  3 --
 .../vueNodes/components/NodeHeader.vue        |  7 +---
 .../vueNodes/components/NodeWidgets.vue       |  7 +---
 .../vueNodes/components/OutputSlot.vue        |  7 +---
 .../vueNodes/composables/useNodeTooltips.ts   | 41 ++++++-------------
 7 files changed, 20 insertions(+), 55 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/components/InputSlot.vue b/src/renderer/extensions/vueNodes/components/InputSlot.vue
index e74688181..e0e01c9ca 100644
--- a/src/renderer/extensions/vueNodes/components/InputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/InputSlot.vue
@@ -27,9 +27,7 @@
 <script setup lang="ts">
 import {
   type ComponentPublicInstance,
-  type Ref,
   computed,
-  inject,
   onErrorCaptured,
   ref,
   watchEffect
@@ -86,11 +84,8 @@ const labelClasses = computed(() =>
 const renderError = ref<string | null>(null)
 const { toastErrorHandler } = useErrorHandling()
 
-const tooltipContainer =
-  inject<Ref<HTMLElement | undefined>>('tooltipContainer')
 const { getInputSlotTooltip, createTooltipConfig } = useNodeTooltips(
-  props.nodeType || '',
-  tooltipContainer
+  props.nodeType || ''
 )
 
 const tooltipConfig = computed(() => {
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index e542ed5e8..63222bbc8 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -118,7 +118,7 @@
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { computed, inject, onErrorCaptured, onMounted, provide, ref } from 'vue'
+import { computed, inject, onErrorCaptured, onMounted, ref } from 'vue'
 
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { toggleNodeOptions } from '@/composables/graph/useMoreOptionsMenu'
@@ -371,5 +371,4 @@ const nodeMedia = computed(() => {
 })
 
 const nodeContainerRef = ref()
-provide('tooltipContainer', nodeContainerRef)
 </script>
diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.test.ts b/src/renderer/extensions/vueNodes/components/NodeHeader.test.ts
index 472427e8f..c00b898e0 100644
--- a/src/renderer/extensions/vueNodes/components/NodeHeader.test.ts
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.test.ts
@@ -101,9 +101,6 @@ const createMountConfig = () => {
           updated: vi.fn(),
           unmounted: vi.fn()
         }
-      },
-      provide: {
-        tooltipContainer: { value: document.createElement('div') }
       }
     }
   }
diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.vue b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
index b48a54b53..51aae33cc 100644
--- a/src/renderer/extensions/vueNodes/components/NodeHeader.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
@@ -62,7 +62,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, computed, inject, onErrorCaptured, ref, watch } from 'vue'
+import { computed, onErrorCaptured, ref, watch } from 'vue'
 
 import IconButton from '@/components/button/IconButton.vue'
 import EditableText from '@/components/common/EditableText.vue'
@@ -108,11 +108,8 @@ onErrorCaptured((error) => {
 // Editing state
 const isEditing = ref(false)
 
-const tooltipContainer =
-  inject<Ref<HTMLElement | undefined>>('tooltipContainer')
 const { getNodeDescription, createTooltipConfig } = useNodeTooltips(
-  nodeData?.type || '',
-  tooltipContainer
+  nodeData?.type || ''
 )
 
 const tooltipConfig = computed(() => {
diff --git a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
index 51aa132b3..463641f3a 100644
--- a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
@@ -52,7 +52,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, computed, inject, onErrorCaptured, ref } from 'vue'
+import { computed, onErrorCaptured, ref } from 'vue'
 
 import type {
   SafeWidgetData,
@@ -98,11 +98,8 @@ onErrorCaptured((error) => {
 })
 
 const nodeType = computed(() => nodeData?.type || '')
-const tooltipContainer =
-  inject<Ref<HTMLElement | undefined>>('tooltipContainer')
 const { getWidgetTooltip, createTooltipConfig } = useNodeTooltips(
-  nodeType.value,
-  tooltipContainer
+  nodeType.value
 )
 
 interface ProcessedWidget {
diff --git a/src/renderer/extensions/vueNodes/components/OutputSlot.vue b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
index 12db0a6a4..14c627aed 100644
--- a/src/renderer/extensions/vueNodes/components/OutputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
@@ -24,9 +24,7 @@
 <script setup lang="ts">
 import {
   type ComponentPublicInstance,
-  type Ref,
   computed,
-  inject,
   onErrorCaptured,
   ref,
   watchEffect
@@ -60,11 +58,8 @@ const renderError = ref<string | null>(null)
 
 const { toastErrorHandler } = useErrorHandling()
 
-const tooltipContainer =
-  inject<Ref<HTMLElement | undefined>>('tooltipContainer')
 const { getOutputSlotTooltip, createTooltipConfig } = useNodeTooltips(
-  props.nodeType || '',
-  tooltipContainer
+  props.nodeType || ''
 )
 
 const tooltipConfig = computed(() => {
diff --git a/src/renderer/extensions/vueNodes/composables/useNodeTooltips.ts b/src/renderer/extensions/vueNodes/composables/useNodeTooltips.ts
index 431e8a8bf..22134ca2b 100644
--- a/src/renderer/extensions/vueNodes/composables/useNodeTooltips.ts
+++ b/src/renderer/extensions/vueNodes/composables/useNodeTooltips.ts
@@ -1,5 +1,8 @@
-import type { TooltipDirectivePassThroughOptions } from 'primevue'
-import { type MaybeRef, type Ref, computed, ref, unref } from 'vue'
+import type {
+  TooltipDirectivePassThroughOptions,
+  TooltipPassThroughMethodOptions
+} from 'primevue/tooltip'
+import { type MaybeRef, computed, ref, unref } from 'vue'
 
 import type { SafeWidgetData } from '@/composables/graph/useGraphNodeManager'
 import { st } from '@/i18n'
@@ -77,10 +80,7 @@ function setupGlobalTooltipHiding() {
  * Composable for managing Vue node tooltips
  * Provides tooltip text for node headers, slots, and widgets
  */
-export function useNodeTooltips(
-  nodeType: MaybeRef<string>,
-  containerRef?: Ref<HTMLElement | undefined>
-) {
+export function useNodeTooltips(nodeType: MaybeRef<string>) {
   const nodeDefStore = useNodeDefStore()
   const settingsStore = useSettingStore()
 
@@ -151,14 +151,7 @@ export function useNodeTooltips(
     const tooltipDelay = settingsStore.get('LiteGraph.Node.TooltipDelay')
     const tooltipText = text || ''
 
-    const config: {
-      value: string
-      showDelay: number
-      hideDelay: number
-      disabled: boolean
-      appendTo?: HTMLElement
-      pt?: TooltipDirectivePassThroughOptions
-    } = {
+    return {
       value: tooltipText,
       showDelay: tooltipDelay as number,
       hideDelay: 0, // Immediate hiding
@@ -172,24 +165,16 @@ export function useNodeTooltips(
           class:
             'border-sand-100 bg-pure-white dark-theme:bg-charcoal-800 border dark-theme:border-slate-300 rounded-md px-4 py-2 text-charcoal-700 dark-theme:text-pure-white text-sm font-normal leading-tight max-w-75 shadow-none'
         },
-        arrow: ({ context }) => ({
+        arrow: ({ context }: TooltipPassThroughMethodOptions) => ({
           class: cn(
-            context?.top && 'border-t-sand-100 dark-theme:border-t-slate-300',
-            context?.bottom &&
-              'border-b-sand-100 dark-theme:border-b-slate-300',
-            context?.left && 'border-l-sand-100 dark-theme:border-l-slate-300',
-            context?.right && 'border-r-sand-100 dark-theme:border-r-slate-300'
+            context.top && 'border-t-sand-100 dark-theme:border-t-slate-300',
+            context.bottom && 'border-b-sand-100 dark-theme:border-b-slate-300',
+            context.left && 'border-l-sand-100 dark-theme:border-l-slate-300',
+            context.right && 'border-r-sand-100 dark-theme:border-r-slate-300'
           )
         })
-      }
+      } as TooltipDirectivePassThroughOptions
     }
-
-    // If we have a container reference, append tooltips to it
-    if (containerRef?.value) {
-      config.appendTo = containerRef.value
-    }
-
-    return config
   }
 
   return {