Argument hints are not tooltips instead of bmd-help elements

src/web/HTMLIngredient.mjs

@@ -54,7 +54,9 @@ class HTMLIngredient {
             case "binaryString":
             case "byteArray":
                 html += `<div class="form-group">
-                    <label for="${this.id}" class="bmd-label-floating">${this.name}</label>
+                    <label for="${this.id}"
+                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
+                        class="bmd-label-floating">${this.name}</label>
                     <input type="text"
                         class="form-control arg"
                         id="${this.id}"
@@ -62,13 +64,14 @@ class HTMLIngredient {
                         arg-name="${this.name}"
                         value="${this.value}"
                         ${this.disabled ? "disabled" : ""}>
-                    ${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
                 </div>`;
                 break;
             case "shortString":
             case "binaryShortString":
                 html += `<div class="form-group inline">
-                    <label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
+                    <label for="${this.id}"
+                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
+                        class="bmd-label-floating inline">${this.name}</label>
                     <input type="text"
                         class="form-control arg inline"
                         id="${this.id}"
@@ -76,13 +79,14 @@ class HTMLIngredient {
                         arg-name="${this.name}"
                         value="${this.value}"
                         ${this.disabled ? "disabled" : ""}>
-                    ${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
                 </div>`;
                 break;
             case "toggleString":
                 html += `<div class="form-group input-group">
                     <div class="toggle-string">
-                        <label for="${this.id}" class="bmd-label-floating toggle-string">${this.name}</label>
+                        <label for="${this.id}"
+                            ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
+                            class="bmd-label-floating toggle-string">${this.name}</label>
                         <input type="text"
                             class="form-control arg toggle-string"
                             id="${this.id}"
@@ -90,7 +94,6 @@ class HTMLIngredient {
                             arg-name="${this.name}"
                             value="${this.value}"
                             ${this.disabled ? "disabled" : ""}>
-                        ${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
                     </div>
                     <div class="input-group-append">
                         <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">${this.toggleValues[0]}</button>
@@ -105,7 +108,9 @@ class HTMLIngredient {
                 break;
             case "number":
                 html += `<div class="form-group inline">
-                    <label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
+                    <label for="${this.id}"
+                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
+                        class="bmd-label-floating inline">${this.name}</label>
                     <input type="number"
                         class="form-control arg inline"
                         id="${this.id}"
@@ -116,13 +121,12 @@ class HTMLIngredient {
                         max="${this.max}"
                         step="${this.step}"
                         ${this.disabled ? "disabled" : ""}>
-                    ${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
                 </div>`;
                 break;
             case "boolean":
                 html += `<div class="form-group inline boolean-arg">
                     <div class="checkbox">
-                        <label>
+                        <label ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}>
                             <input type="checkbox"
                                 class="arg"
                                 id="${this.id}"
@@ -132,13 +136,14 @@ class HTMLIngredient {
                                 ${this.disabled ? " disabled" : ""}
                                 value="${this.name}"> ${this.name}
                         </label>
-                        ${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
                     </div>
                 </div>`;
                 break;
             case "option":
                 html += `<div class="form-group inline">
-                    <label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
+                    <label for="${this.id}"
+                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
+                        class="bmd-label-floating inline">${this.name}</label>
                     <select
                         class="form-control arg inline"
                         id="${this.id}"
@@ -155,13 +160,14 @@ class HTMLIngredient {
                     }
                 }
                 html += `</select>
-                    ${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
                 </div>`;
                 break;
             case "populateOption":
             case "populateMultiOption":
                 html += `<div class="form-group">
-                    <label for="${this.id}" class="bmd-label-floating">${this.name}</label>
+                    <label for="${this.id}"
+                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
+                        class="bmd-label-floating">${this.name}</label>
                     <select
                         class="form-control arg no-state-change populate-option"
                         id="${this.id}"
@@ -181,7 +187,6 @@ class HTMLIngredient {
                     }
                 }
                 html += `</select>
-                    ${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
                 </div>`;
 
                 eventFn = this.type === "populateMultiOption" ?
@@ -191,7 +196,9 @@ class HTMLIngredient {
                 break;
             case "editableOption":
                 html += `<div class="form-group input-group">
-                    <label for="${this.id}" class="bmd-label-floating">${this.name}</label>
+                    <label for="${this.id}"
+                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
+                        class="bmd-label-floating">${this.name}</label>
                     <input type="text"
                         class="form-control arg"
                         id="${this.id}"
@@ -199,7 +206,6 @@ class HTMLIngredient {
                         arg-name="${this.name}"
                         value="${this.value[this.defaultIndex].value}"
                         ${this.disabled ? "disabled" : ""}>
-                    ${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
                     <div class="input-group-append">
                         <button type="button"
                             class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
@@ -221,7 +227,9 @@ class HTMLIngredient {
                 break;
             case "editableOptionShort":
                 html += `<div class="form-group input-group inline">
-                    <label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
+                    <label for="${this.id}"
+                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
+                        class="bmd-label-floating inline">${this.name}</label>
                     <input type="text"
                         class="form-control arg inline"
                         id="${this.id}"
@@ -229,7 +237,6 @@ class HTMLIngredient {
                         arg-name="${this.name}"
                         value="${this.value[this.defaultIndex].value}"
                         ${this.disabled ? "disabled" : ""}>
-                    ${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
                     <div class="input-group-append inline">
                         <button type="button"
                             class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
@@ -251,7 +258,9 @@ class HTMLIngredient {
                 break;
             case "text":
                 html += `<div class="form-group">
-                    <label for="${this.id}" class="bmd-label-floating">${this.name}</label>
+                    <label for="${this.id}"
+                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
+                        class="bmd-label-floating">${this.name}</label>
                     <textarea
                         class="form-control arg"
                         id="${this.id}"
@@ -259,12 +268,13 @@ class HTMLIngredient {
                         arg-name="${this.name}"
                         rows="${this.rows ? this.rows : 3}"
                         ${this.disabled ? "disabled" : ""}>${this.value}</textarea>
-                    ${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
                 </div>`;
                 break;
             case "argSelector":
                 html += `<div class="form-group inline">
-                    <label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
+                    <label for="${this.id}"
+                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
+                        class="bmd-label-floating inline">${this.name}</label>
                     <select
                         class="form-control arg inline arg-selector"
                         id="${this.id}"
@@ -279,7 +289,6 @@ class HTMLIngredient {
                         </option>`;
                 }
                 html += `</select>
-                    ${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
                 </div>`;
 
                 this.manager.addDynamicListener(".arg-selector", "change", this.argSelectorChange, this);

src/web/stylesheets/components/_operation.css

@@ -159,10 +159,6 @@ div.toggle-string {
     width: calc(100% - 13px);
 }
 
-.operation .bmd-form-group .bmd-help {
-    margin-top: -17px;
-}
-
 .input-group .form-control {
     border-top-left-radius: 4px !important;
 }

src/web/waiters/RecipeWaiter.mjs

@@ -399,6 +399,8 @@ class RecipeWaiter {
         this.buildRecipeOperation(item);
         document.getElementById("rec-list").appendChild(item);
 
+        $(item).find("[data-toggle='tooltip']").tooltip();
+
         item.dispatchEvent(this.manager.operationadd);
         return item;
     }