Add support for simple tooltips

nodes.py

@@ -52,6 +52,13 @@ def INPUT_TYPES(s):
     FUNCTION = "encode"
 
     CATEGORY = "conditioning"
+    TOOLTIPS = {
+        "input": { 
+            "text": "The text to be encoded",
+            "clip": "The CLIP model used for encoding the text.",
+        },
+        "output": ("A conditioning containing the embedded text used to guide the diffusion model.",)
+    }
 
     def encode(self, clip, text):
         tokens = clip.tokenize(text)
@@ -590,6 +597,16 @@ def INPUT_TYPES(s):
     FUNCTION = "load_lora"
 
     CATEGORY = "loaders"
+    TOOLTIPS = {
+        "input": { 
+            "model": "The diffusion model the LoRA will be applied to.",
+            "clip": "The CLIP model the LoRA will be applied to.",
+            "lora_name": "The name of the LoRA.",
+            "strength_model": "How strongly to modify the diffusion model. This value can be negative.",
+            "strength_clip": "How strongly to modify the CLIP model. This value can be negative.",
+        },
+        "output": ("The modified diffusion model.", "The modified CLIP model.")
+    }
 
     def load_lora(self, model, clip, lora_name, strength_model, strength_clip):
         if strength_model == 0 and strength_clip == 0:

server.py

@@ -405,6 +405,9 @@ def node_info(node_class):
 
             if hasattr(obj_class, 'CATEGORY'):
                 info['category'] = obj_class.CATEGORY
+
+            if hasattr(obj_class, 'TOOLTIPS'):
+                info['tooltips'] = obj_class.TOOLTIPS
             return info
 
         @routes.get("/object_info")

web/extensions/core/tooltip.css

@@ -0,0 +1,16 @@
+.comfy-graph-tooltip {
+	z-index: 99999;
+	padding: 4px 8px;
+	background: var(--comfy-input-bg);
+	color: var(--input-text);
+	position: absolute;
+	left: 0;
+	top: 0;
+	display: none;
+	transform: translate(5px, calc(-100% - 5px));
+	max-width: 30vw;
+	border-radius: 5px;
+	box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
+	font-family: sans-serif;
+	white-space: pre-wrap;
+}

web/extensions/core/tooltips.js

@@ -0,0 +1,107 @@
+import { app } from "../../scripts/app.js";
+import { $el } from "../../scripts/ui.js";
+
+// Adds support for tooltips
+
+function getHoveredWidget() {
+	const node = app.canvas.node_over;
+	if (!node.widgets) return;
+
+	const graphPos = app.canvas.graph_mouse;
+
+	const x = graphPos[0] - node.pos[0];
+	const y = graphPos[1] - node.pos[1];
+
+	for (const w of node.widgets) {
+		let widgetWidth, widgetHeight;
+		if (w.computeSize) {
+			const sz = w.computeSize();
+			widgetWidth = sz[0];
+			widgetHeight = sz[1];
+		} else {
+			widgetWidth = w.width || node.size[0];
+			widgetHeight = LiteGraph.NODE_WIDGET_HEIGHT;
+		}
+
+		if (w.last_y !== undefined && x >= 6 && x <= widgetWidth - 12 && y >= w.last_y && y <= w.last_y + widgetHeight) {
+			return w;
+		}
+	}
+}
+
+app.registerExtension({
+	name: "Comfy.Tooltips",
+	setup() {
+		const tooltipEl = $el("div.comfy-graph-tooltip", {
+			parent: document.body,
+		});
+
+		let tooltipTimeout;
+		const hideTooltip = () => {
+			if (tooltipTimeout) {
+				clearTimeout(tooltipTimeout);
+			}
+			tooltipEl.style.display = "none";
+		};
+		const showTooltip = (tooltip) => {
+			if (tooltipTimeout) {
+				clearTimeout(tooltipTimeout);
+			}
+			if (tooltip) {
+				tooltipTimeout = setTimeout(() => {
+					tooltipEl.textContent = tooltip;
+					tooltipEl.style.display = "block";
+					tooltipEl.style.left = app.canvas.mouse[0] + "px";
+					tooltipEl.style.top = app.canvas.mouse[1] + "px";
+					const rect = tooltipEl.getBoundingClientRect();
+					if(rect.right > window.innerWidth) {
+						tooltipEl.style.left = (app.canvas.mouse[0] - rect.width) + "px";
+					}
+
+					if(rect.top < 0) {
+						tooltipEl.style.top = (app.canvas.mouse[1] + rect.height) + "px";
+					}
+				}, 500);
+			}
+		};
+
+		const onCanvasPointerMove = function () {
+			hideTooltip();
+			const node = this.node_over;
+			if (!node) return;
+
+			const tooltips = node.constructor.nodeData?.tooltips;
+			if (!tooltips) return;
+
+			const inputSlot = this.isOverNodeInput(node, this.graph_mouse[0], this.graph_mouse[1], [0, 0]);
+			if (inputSlot !== -1) {
+				return showTooltip(tooltips.input?.[node.inputs[inputSlot].name]);
+			}
+
+			const outputSlot = this.isOverNodeOutput(node, this.graph_mouse[0], this.graph_mouse[1], [0, 0]);
+			if (outputSlot !== -1) {
+				return showTooltip(tooltips.output?.[outputSlot]);
+			}
+
+			const widget = getHoveredWidget();
+			// Dont show for DOM widgets, these use native browser tooltips as we dont get proper mouse events on these
+			if (widget && !widget.element) {
+				return showTooltip(tooltips.input?.[widget.name]);
+			}
+		}.bind(app.canvas);
+
+		app.ui.settings.addSetting({
+			id: "Comfy.EnableTooltips",
+			name: "Enable Tooltips",
+			type: "boolean",
+			defaultValue: true,
+			onChange(value) {
+				if (value) {
+					LiteGraph.pointerListenerAdd(app.canvasEl, "move", onCanvasPointerMove);
+				} else {
+					LiteGraph.pointerListenerRemove(app.canvasEl, "move", onCanvasPointerMove);
+				}
+			},
+		});
+	},
+});

web/scripts/domWidget.js

@@ -221,6 +221,11 @@ LGraphNode.prototype.addDOMWidget = function (name, type, element, options) {
 		document.addEventListener("mousedown", mouseDownHandler);
 	}
 
+	const tooltip = this.constructor.nodeData?.tooltips?.input[name];
+	if (tooltip && !element.title) {
+		element.title = tooltip;
+	}
+
 	const widget = {
 		type,
 		name,

web/style.css

@@ -557,3 +557,20 @@ dialog::backdrop {
 		border-top: none;
 	}
 }
+
+.comfy-graph-tooltip {
+	z-index: 99999;
+	padding: 4px 8px;
+	background: var(--comfy-input-bg);
+	color: var(--input-text);
+	position: absolute;
+	left: 0;
+	top: 0;
+	display: none;
+	transform: translate(5px, calc(-100% - 5px));
+	max-width: 30vw;
+	border-radius: 5px;
+	box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
+	font-family: sans-serif;
+	white-space: pre-wrap;
+}