Fix/vue nodes tooltips (#5856)

## Summary

Make vue node tooltips support color modes and hide when user drags node
or zooms in or out.

IMPORTANT: this approach is non ideal. But for sake of time its a valid
escape hatch. The reason for this approach is because of how primevue
exposes tooltips via a directive and the inability to modify its state /
conditionally render it directly. Instead we must get the actual tooltip
element from the dom and trigger a mouseleave event.

Follow up PR would be refactoring the entire useNodeTooltip.ts
composable and tooltip system from primevue to something like RekaUI
which is a much more declarative approach. To start we could just
refactor Vue nodes themselves to RekaUI tooltips and then later migrate
the other instances.

## Changes

- **What**:  hide tooltips on drag and zoom. Use color themes

## Review Focus

Tooltip hover states after dragging. 
Fixes: 
-
https://www.notion.so/comfy-org/Bug-Fix-tooltip-appearing-when-clicking-and-dragging-Vue-node-header-2796d73d365081f692fdde30c51580e1?source=copy_link
-
https://www.notion.so/comfy-org/Bug-Fix-chevron-color-customization-in-tooltip-pseudo-element-27b6d73d3650814abc25fc0eefda1648?source=copy_link
-
https://www.notion.so/comfy-org/Bug-Bug-Tooltip-positioning-breaks-with-zoom-due-to-missing-appendTo-prop-27b6d73d36508186858bd1cb4336ec03?source=copy_link

## Screenshots (if applicable)


https://github.com/user-attachments/assets/06c70f6c-bf64-4b6d-8e6f-739995549940

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5856-Fix-vue-nodes-tooltips-27e6d73d36508177a77bf7f2f27344f4)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Jake Schroeder <jake.schroeder@isophex.com>
This commit is contained in:
Simula_r
2025-09-29 22:18:14 -07:00
committed by GitHub
parent 789617415d
commit c47cedcec2
2 changed files with 89 additions and 7 deletions

View File

@@ -4,7 +4,7 @@
</div>
<div
v-else
class="lg-node-header p-4 rounded-t-2xl w-full cursor-move"
class="lg-node-header p-4 rounded-t-2xl cursor-move"
:style="headerStyle"
:data-testid="`node-header-${nodeData?.id || ''}`"
@dblclick="handleDoubleClick"