From 4112fe96b0cccfb39afe28fd0b6d288700da3fe4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20=20Sk=C3=B6ld?= <lucasskold49@gmail.com>
Date: Tue, 23 Apr 2024 17:12:47 +0200
Subject: [PATCH] Fixed tooltip on custom lora settings

---
 web/customLoraLoaders.js | 42 +++++++++++++++++++++++++++-------------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/web/customLoraLoaders.js b/web/customLoraLoaders.js
index d20fb85..62cf9e4 100644
--- a/web/customLoraLoaders.js
+++ b/web/customLoraLoaders.js
@@ -1,6 +1,8 @@
 import { app } from "../../../scripts/app.js";
 
 function createMultilineTextSetting(name, setter, value, attrs, tooltip = "") {
+    console.log("Tooltip received:", tooltip); // Debug to check tooltip value
+
     // Create elements
     const tr = document.createElement("tr");
     const tdLabel = document.createElement("td");
@@ -12,12 +14,19 @@ function createMultilineTextSetting(name, setter, value, attrs, tooltip = "") {
     const uniqueId = `custom-setting-${Date.now()}`; // Unique ID for associating label with textarea
     label.setAttribute("for", uniqueId);
     label.textContent = name;
-    label.className = tooltip ? "comfy-tooltip-indicator" : ""; // Apply class if tooltip is present
+
+    // Check for tooltip and apply the class and title
+    if (tooltip) {
+        label.className = "comfy-tooltip-indicator"; // Apply tooltip indicator class
+        console.log("Class set:", label.className); // Debug to verify class set
+    }
 
     // Configure textarea
     textarea.id = uniqueId;
     textarea.value = value;
-    textarea.setAttribute("style", "width: 100%; height: 100px; resize: none;"); // Fixed size and non-resizable
+    textarea.style.width = "100%";
+    textarea.style.height = "100px";
+    textarea.style.resize = "none";
 
     // Set event handlers
     textarea.onchange = () => {
@@ -35,34 +44,41 @@ function createMultilineTextSetting(name, setter, value, attrs, tooltip = "") {
     tr.appendChild(tdLabel);
     tr.appendChild(tdInput);
 
-    // Set tooltip if available
-    if (tooltip) {
-        label.title = tooltip; // Set the tooltip text
-    }
-
     return tr;
 }
 
+// Define a wrapper function for creating the multiline text setting that includes the tooltip
+const createMultilineTextSettingWithTooltip = (name, defaultValue, tooltip) => {
+    return () => createMultilineTextSetting(name, value => console.log(`Setting ${name} updated to: ${value}`), defaultValue, {}, tooltip);
+};
+
 // Define settings for "Custom Lora Loaders XL"
-const xlId = "sn0w.CustomLoraLoadersXL";
 const xlSettingDefinition = {
-    id: xlId,
+    id: "sn0w.CustomLoraLoadersXL",
     name: "[Sn0w] Custom Lora Loaders XL",
-    type: createMultilineTextSetting,
+    type: createMultilineTextSettingWithTooltip(
+        "[Sn0w] Custom Lora Loaders XL",
+        "ExampleName1:Value1\nExampleName2:Value2",
+        "Enter each name-value pair on a new line, separated by a colon (:)."
+    ),
     defaultValue: "ExampleName1:Value1\nExampleName2:Value2",
     tooltip: "Enter each name-value pair on a new line, separated by a colon (:)."
 };
 
 // Define settings for "Custom Lora Loaders" (without XL)
-const nonXlId = "sn0w.CustomLoraLoaders1.5";
 const nonXlSettingDefinition = {
-    id: nonXlId,
+    id: "sn0w.CustomLoraLoaders1.5",
     name: "[Sn0w] Custom Lora Loaders 1.5",
-    type: createMultilineTextSetting,
+    type: createMultilineTextSettingWithTooltip(
+        "[Sn0w] Custom Lora Loaders 1.5",
+        "ExampleName1:Value1\nExampleName2:Value2",
+        "Enter each name-value pair on a new line, separated by a colon (:)."
+    ),
     defaultValue: "ExampleName1:Value1\nExampleName2:Value2",
     tooltip: "Enter each name-value pair on a new line, separated by a colon (:)."
 };
 
+
 // Register extensions for both settings
 const registerSetting = (settingDefinition) => {
     const extension = {