mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-29 10:42:44 +00:00
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:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user