From 9d9cced7c4f0ec86c0bd7678c78c2c4273bd6297 Mon Sep 17 00:00:00 2001
From: Bart van Andel <bavanandel@gmail.com>
Date: Sun, 6 Apr 2025 01:26:56 +0200
Subject: [PATCH 1/2] fix: ensure hint tooltips are rendered for all argument
 types

Move hint tooltip from label to form-group container element. This
ensures that the tooltip is also displayed for form elements with an
inline label, for which pointer-events are disabled (and rightly so)
by Bootstrap Material Design.

Logic applied to arguments of all types to ensure layout consistency.
---
 src/web/HTMLIngredient.mjs | 67 ++++++++++++++------------------------
 1 file changed, 24 insertions(+), 43 deletions(-)

diff --git a/src/web/HTMLIngredient.mjs b/src/web/HTMLIngredient.mjs
index 7eddb32c..91cbed89 100755
--- a/src/web/HTMLIngredient.mjs
+++ b/src/web/HTMLIngredient.mjs
@@ -49,15 +49,14 @@ class HTMLIngredient {
     toHtml() {
         let html = "",
             i, m, eventFn;
+        const hintHtml = this.hint ? `data-toggle="tooltip" title="${this.hint}"` : "";
 
         switch (this.type) {
             case "string":
             case "binaryString":
             case "byteArray":
-                html += `<div class="form-group ing-wide">
-                    <label for="${this.id}"
-                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
-                        class="bmd-label-floating">${this.name}</label>
+                html += `<div class="form-group ing-wide" ${hintHtml}>
+                    <label for="${this.id}" class="bmd-label-floating">${this.name}</label>
                     <input type="text"
                         class="form-control arg"
                         id="${this.id}"
@@ -70,10 +69,8 @@ class HTMLIngredient {
                 break;
             case "shortString":
             case "binaryShortString":
-                html += `<div class="form-group ing-short">
-                    <label for="${this.id}"
-                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
-                        class="bmd-label-floating inline">${this.name}</label>
+                html += `<div class="form-group ing-short" ${hintHtml}>
+                    <label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
                     <input type="text"
                         class="form-control arg inline"
                         id="${this.id}"
@@ -85,11 +82,9 @@ class HTMLIngredient {
                 </div>`;
                 break;
             case "toggleString":
-                html += `<div class="form-group input-group ing-wide" data-help-title="Multi-type ingredients" data-help="Selecting a data type from the dropdown will change how the ingredient is interpreted by the operation.">
+                html += `<div class="form-group input-group ing-wide" data-help-title="Multi-type ingredients" data-help="Selecting a data type from the dropdown will change how the ingredient is interpreted by the operation." ${hintHtml}>
                     <div class="toggle-string">
-                        <label for="${this.id}"
-                            ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
-                            class="bmd-label-floating toggle-string">${this.name}</label>
+                        <label for="${this.id}" class="bmd-label-floating toggle-string">${this.name}</label>
                         <input type="text"
                             class="form-control arg toggle-string"
                             id="${this.id}"
@@ -111,10 +106,8 @@ class HTMLIngredient {
                 </div>`;
                 break;
             case "number":
-                html += `<div class="form-group inline ing-medium">
-                    <label for="${this.id}"
-                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
-                        class="bmd-label-floating inline">${this.name}</label>
+                html += `<div class="form-group inline ing-medium" ${hintHtml}>
+                    <label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
                     <input type="number"
                         class="form-control arg inline"
                         id="${this.id}"
@@ -128,9 +121,9 @@ class HTMLIngredient {
                 </div>`;
                 break;
             case "boolean":
-                html += `<div class="form-group inline boolean-arg ing-flexible">
+                html += `<div class="form-group inline boolean-arg ing-flexible" ${hintHtml}>
                     <div class="checkbox">
-                        <label ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}>
+                        <label>
                             <input type="checkbox"
                                 class="arg"
                                 id="${this.id}"
@@ -144,10 +137,8 @@ class HTMLIngredient {
                 </div>`;
                 break;
             case "option":
-                html += `<div class="form-group ing-medium">
-                    <label for="${this.id}"
-                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
-                        class="bmd-label-floating inline">${this.name}</label>
+                html += `<div class="form-group ing-medium" ${hintHtml}>
+                    <label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
                     <select
                         class="form-control arg inline"
                         id="${this.id}"
@@ -168,10 +159,8 @@ class HTMLIngredient {
                 break;
             case "populateOption":
             case "populateMultiOption":
-                html += `<div class="form-group ing-medium" data-help-title="Population dropdowns" data-help="Selecting a value from this dropdown will populate some of the other ingredients for this operation with pre-canned values.">
-                    <label for="${this.id}"
-                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
-                        class="bmd-label-floating">${this.name}</label>
+                html += `<div class="form-group ing-medium" data-help-title="Population dropdowns" data-help="Selecting a value from this dropdown will populate some of the other ingredients for this operation with pre-canned values." ${hintHtml}>
+                    <label for="${this.id}" class="bmd-label-floating">${this.name}</label>
                     <select
                         class="form-control arg no-state-change populate-option"
                         id="${this.id}"
@@ -199,10 +188,8 @@ class HTMLIngredient {
                 this.manager.addDynamicListener("#" + this.id, "change", eventFn, this);
                 break;
             case "editableOption":
-                html += `<div class="form-group input-group ing-wide">
-                    <label for="${this.id}"
-                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
-                        class="bmd-label-floating">${this.name}</label>
+                html += `<div class="form-group input-group ing-wide" ${hintHtml}>
+                    <label for="${this.id}" class="bmd-label-floating">${this.name}</label>
                     <input type="text"
                         class="form-control arg"
                         id="${this.id}"
@@ -230,10 +217,8 @@ class HTMLIngredient {
                 this.manager.addDynamicListener(".editable-option-menu a", "click", this.editableOptionClick, this);
                 break;
             case "editableOptionShort":
-                html += `<div class="form-group input-group ing-short">
-                    <label for="${this.id}"
-                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
-                        class="bmd-label-floating inline">${this.name}</label>
+                html += `<div class="form-group input-group ing-short" ${hintHtml}>
+                    <label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
                     <input type="text"
                         class="form-control arg inline"
                         id="${this.id}"
@@ -261,10 +246,8 @@ class HTMLIngredient {
                 this.manager.addDynamicListener(".editable-option-menu a", "click", this.editableOptionClick, this);
                 break;
             case "text":
-                html += `<div class="form-group ing-very-wide">
-                    <label for="${this.id}"
-                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
-                        class="bmd-label-floating">${this.name}</label>
+                html += `<div class="form-group ing-very-wide" ${hintHtml}>
+                    <label for="${this.id}" class="bmd-label-floating">${this.name}</label>
                     <textarea
                         class="form-control arg"
                         id="${this.id}"
@@ -275,10 +258,8 @@ class HTMLIngredient {
                 </div>`;
                 break;
             case "argSelector":
-                html += `<div class="form-group inline ing-medium" data-help-title="Ingredient selector" data-help="Selecting options in this dropdown will configure which operation ingredients are visible.">
-                    <label for="${this.id}"
-                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
-                        class="bmd-label-floating inline">${this.name}</label>
+                html += `<div class="form-group inline ing-medium" data-help-title="Ingredient selector" data-help="Selecting options in this dropdown will configure which operation ingredients are visible." ${hintHtml}>
+                    <label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
                     <select
                         class="form-control arg inline arg-selector"
                         id="${this.id}"
@@ -298,7 +279,7 @@ class HTMLIngredient {
                 this.manager.addDynamicListener(".arg-selector", "change", this.argSelectorChange, this);
                 break;
             case "label":
-                html += `<div class="form-group ing-flexible">
+                html += `<div class="form-group ing-flexible" ${hintHtml}>
                     <label>${this.name}</label>
                     <input type="hidden"
                         class="form-control arg"

From 7211906e0f7f030d188a7c4c532463536e5a469e Mon Sep 17 00:00:00 2001
From: Bart van Andel <bavanandel@gmail.com>
Date: Sun, 6 Apr 2025 01:29:52 +0200
Subject: [PATCH 2/2] fix: ensure jquery tooltip is displayed correctly

Move jquery tooltip logic to the buildRecipeOperation function, so it
is called regardless of whether the recipe is loaded from the url
(which already worked correctly) or by dropping ingredients (which
wasn't working before)
---
 src/web/waiters/RecipeWaiter.mjs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/web/waiters/RecipeWaiter.mjs b/src/web/waiters/RecipeWaiter.mjs
index 93ca1182..4272ef3b 100755
--- a/src/web/waiters/RecipeWaiter.mjs
+++ b/src/web/waiters/RecipeWaiter.mjs
@@ -417,6 +417,8 @@ class RecipeWaiter {
             el.classList.add("flow-control-op");
         }
 
+        $(el).find("[data-toggle='tooltip']").tooltip();
+
         // Disable auto-bake if this is a manual op
         if (op.manualBake && this.app.autoBake_) {
             this.manager.controls.setAutoBake(false);
@@ -442,8 +444,6 @@ class RecipeWaiter {
         this.buildRecipeOperation(item);
         document.getElementById("rec-list").appendChild(item);
 
-        $(item).find("[data-toggle='tooltip']").tooltip();
-
         item.dispatchEvent(this.manager.operationadd);
         return item;
     }