Alignment weight tooltips (#43)

Galaxy102 · Feb 14, 2022 · f8758f2 · f8758f2
1 parent f28c7c0
commit f8758f2
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/main/resources/static/js/toolkit.js b/src/main/resources/static/js/toolkit.js
@@ -148,6 +148,23 @@ $(document).ready(function () {
     // Toasts
     $('.toast').each(function () {
         (new bootstrap.Toast(this, {})).show();
-    })
+    });
+    // Tooltips
+    $('.xapi-alignment-tooltip').each(function () {
+        (new bootstrap.Tooltip(this, {
+            title: 'x',
+            container: this.parentNode,
+            placement: 'left'
+        }));
+    }).on('input', function () {
+            const tt = bootstrap.Tooltip.getInstance(this).tip;
+            tt.lastElementChild.innerText = this.value;
+        }
+    );
+    $(window).on('inserted.bs.tooltip', function (ev) {
+        const inpEl = ev.target.parentNode.firstElementChild;
+        const tt = bootstrap.Tooltip.getInstance(inpEl).tip;
+        tt.lastElementChild.innerText = inpEl.value;
+    });
 });
 
diff --git a/src/main/resources/templates/bootstrap/datasim/alignment.html b/src/main/resources/templates/bootstrap/datasim/alignment.html
@@ -65,7 +65,8 @@ <h3 class="mb-3">Map affinities</h3>
                             <label class="col-6 col-form-label" th:text="${personaAlign.getKey().getName()}"
                                    th:for="'range' + ${personaAlign.getKey().getId()}"></label>
                             <div class="col-6">
-                                <input type="range" class="form-range" min="-1" max="1" step="0.1" th:id="'range' + ${personaAlign.getKey().getId()}"
+                                <input type="range" class="form-range xapi-alignment-tooltip" min="-1" max="1" step="0.1"
+                                       th:id="'range' + ${personaAlign.getKey().getId()}"
                                        th:value="${personaAlign.getValue()}" th:name="${personaAlign.getKey().getId()} + '@' + ${alignment.getKey()}"
                                        th:disabled="${mode == mode.DISPLAYING}">
                             </div>