refactor: remove unused tooltip appendTo code (#5943)

## 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>

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 || '',
+  props.nodeType || ''
-  tooltipContainer
 )
 
 const tooltipConfig = computed(() => {

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>

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') }
       }
     }
   }

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 || '',
+  nodeData?.type || ''
-  tooltipContainer
 )
 
 const tooltipConfig = computed(() => {

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,
+  nodeType.value
-  tooltipContainer
 )
 
 interface ProcessedWidget {

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 || '',
+  props.nodeType || ''
-  tooltipContainer
 )
 
 const tooltipConfig = computed(() => {

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

@@ -1,5 +1,8 @@
-import type { TooltipDirectivePassThroughOptions } from 'primevue'
+import type {
-import { type MaybeRef, type Ref, computed, ref, unref } from 'vue'
+  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(
+export function useNodeTooltips(nodeType: MaybeRef<string>) {
-  nodeType: MaybeRef<string>,
-  containerRef?: Ref<HTMLElement | undefined>
-) {
   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: {
+    return {
-      value: string
-      showDelay: number
-      hideDelay: number
-      disabled: boolean
-      appendTo?: HTMLElement
-      pt?: TooltipDirectivePassThroughOptions
-    } = {
       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.top && 'border-t-sand-100 dark-theme:border-t-slate-300',
-            context?.bottom &&
+            context.bottom && 'border-b-sand-100 dark-theme:border-b-slate-300',
-              'border-b-sand-100 dark-theme:border-b-slate-300',
+            context.left && 'border-l-sand-100 dark-theme:border-l-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?.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 {