Add Vue nodes mode compatibility for tooltips

Author: Azornes

js/drawing/resolution_master_draw_methods.js

@@ -88,7 +88,10 @@ export const drawingMethods = {
                 this.drawSliderMode(ctx, currentY);
             }
 
-            if (this.showTooltip && this.tooltipElement && this.tooltips[this.tooltipElement]) {
+            if (!this.isVueNodesMode?.()
+                && this.showTooltip
+                && this.tooltipElement
+                && this.tooltips[this.tooltipElement]) {
                 this.drawTooltip(ctx);
             }
         } finally {

js/interaction/resolution_master_interaction_methods.js

@@ -534,18 +534,24 @@ export const interactionMethods = {
             clearTimeout(this.tooltipTimer);
             this.tooltipTimer = null;
         }
+        this.hideVueCompatTooltip?.();
         if (this.showTooltip) {
             this.showTooltip = false;
             this.tooltipElement = null;
             this.requestCanvasUpdate(true);
         }
         if (element && this.tooltips[element]) {
             const initialMousePos = { x: e.canvasX, y: e.canvasY };
+            const initialClientPos = { clientX: e.clientX, clientY: e.clientY };
             this.tooltipTimer = setTimeout(() => {
                 this.tooltipElement = element;
                 this.showTooltip = true;
                 this.tooltipFixedPos = initialMousePos;
-                this.requestCanvasUpdate(true);
+                if (this.isVueNodesMode?.()) {
+                    this.showVueCompatTooltip?.(element, initialClientPos);
+                } else {
+                    this.requestCanvasUpdate(true);
+                }
             }, this.tooltipDelay);
         }
     },

js/node/resolution_master_node_lifecycle.js

@@ -506,6 +506,7 @@ export const nodeLifecycleMethods = {
                 clearTimeout(this.tooltipTimer);
                 this.tooltipTimer = null;
             }
+            this.hideVueCompatTooltip();
             this.hoverElement = null;
             this.tooltipElement = null;
             this.showTooltip = false;
@@ -518,6 +519,80 @@ export const nodeLifecycleMethods = {
         this._vueCompatCanvasHandlers = { handlePointerMove, handlePointerLeave };
     },
 
+    showVueCompatTooltip(element, pointerPosition) {
+        const text = this.tooltips?.[element];
+        const clientX = Number(pointerPosition?.clientX);
+        const clientY = Number(pointerPosition?.clientY);
+        if (!text || !Number.isFinite(clientX) || !Number.isFinite(clientY) || typeof document === "undefined") {
+            return;
+        }
+
+        if (!this._vueCompatTooltip) {
+            const tooltip = document.createElement("div");
+            tooltip.dataset.resolutionMasterTooltip = "true";
+            tooltip.style.cssText = [
+                "position:fixed",
+                "z-index:100000",
+                "pointer-events:none",
+                "box-sizing:border-box",
+                "max-width:266px",
+                "padding:8px 8px 4px",
+                "border:1px solid rgba(200,200,200,0.3)",
+                "border-radius:6px",
+                "background:linear-gradient(180deg, rgba(45,45,45,0.95), rgba(35,35,35,0.95))",
+                "box-shadow:2px 2px 0 rgba(0,0,0,0.3)",
+                "color:#fff",
+                "font:12px Arial, sans-serif",
+                "line-height:16px",
+                "white-space:normal"
+            ].join(";");
+            document.body.appendChild(tooltip);
+            this._vueCompatTooltip = tooltip;
+        }
+
+        const tooltip = this._vueCompatTooltip;
+        tooltip.textContent = text;
+        tooltip.style.display = "block";
+        tooltip.style.visibility = "hidden";
+        tooltip.style.left = "0px";
+        tooltip.style.top = "0px";
+
+        const tooltipRect = tooltip.getBoundingClientRect();
+        const viewportWidth = document.documentElement?.clientWidth || globalThis.innerWidth || 0;
+        const viewportHeight = document.documentElement?.clientHeight || globalThis.innerHeight || 0;
+        const viewportMargin = 8;
+        let left = clientX + 15;
+        let top = clientY - tooltipRect.height - 10;
+
+        if (viewportWidth > 0 && left + tooltipRect.width > viewportWidth - viewportMargin) {
+            left = clientX - tooltipRect.width - 15;
+        }
+        if (top < viewportMargin) {
+            top = clientY + 20;
+        }
+        if (viewportWidth > 0) {
+            left = Math.max(viewportMargin, Math.min(left, viewportWidth - tooltipRect.width - viewportMargin));
+        }
+        if (viewportHeight > 0) {
+            top = Math.max(viewportMargin, Math.min(top, viewportHeight - tooltipRect.height - viewportMargin));
+        }
+
+        tooltip.style.left = `${Math.round(left)}px`;
+        tooltip.style.top = `${Math.round(top)}px`;
+        tooltip.style.visibility = "visible";
+    },
+
+    hideVueCompatTooltip() {
+        if (this._vueCompatTooltip) {
+            this._vueCompatTooltip.style.display = "none";
+        }
+    },
+
+    teardownVueCompatTooltip() {
+        this._vueCompatTooltip?.remove?.();
+        this._vueCompatTooltip = null;
+    },
+
     teardownVueCompatCanvasEvents() {
         if (this._vueCompatHeightRedrawFrame != null) {
             if (typeof cancelAnimationFrame === 'function') {
@@ -536,6 +611,7 @@ export const nodeLifecycleMethods = {
         this._vueCompatCanvasElement = null;
         this._vueCompatCanvasHandlers = null;
         this._vueCompatForwardingNodePointer = false;
+        this.teardownVueCompatTooltip();
         this.teardownVueCompatCanvasLayout();
     },
 

tests/js/node_lifecycle.test.mjs

@@ -175,6 +175,57 @@ test("Vue output slot centers are measured relative to the widget canvas", () =>
 });
 
 
+test("Vue tooltip is rendered in the document overlay and constrained to the viewport", () => {
+    const previousDocument = globalThis.document;
+    const tooltip = {
+        dataset: {},
+        style: {},
+        textContent: "",
+        removed: false,
+        getBoundingClientRect() {
+            return { width: 120, height: 40 };
+        },
+        remove() {
+            this.removed = true;
+        }
+    };
+    globalThis.document = {
+        documentElement: { clientWidth: 300, clientHeight: 200 },
+        createElement() {
+            return tooltip;
+        },
+        body: {
+            appendChild() {}
+        }
+    };
+
+    try {
+        const controller = createLifecycleController();
+        controller.tooltips = { widthValueArea: "Click to enter width manually." };
+
+        controller.showVueCompatTooltip("widthValueArea", { clientX: 280, clientY: 20 });
+
+        assert.equal(tooltip.textContent, "Click to enter width manually.");
+        assert.equal(tooltip.style.left, "145px");
+        assert.equal(tooltip.style.top, "40px");
+        assert.equal(tooltip.style.visibility, "visible");
+
+        controller.hideVueCompatTooltip();
+        assert.equal(tooltip.style.display, "none");
+
+        controller.teardownVueCompatTooltip();
+        assert.equal(tooltip.removed, true);
+        assert.equal(controller._vueCompatTooltip, null);
+    } finally {
+        if (previousDocument === undefined) {
+            delete globalThis.document;
+        } else {
+            globalThis.document = previousDocument;
+        }
+    }
+});
+
+
 test("LiteGraph lifecycle hooks synchronize serialization and clean up on removal", () => {
     const events = [];
     const widthWidget = { name: "width", value: 640 };