From f8758f21dd9ac92cd3b4ff2f20c20e2e1c6e2f82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Konstantin=20K=C3=B6hring?=
 <konstantin.koehring@tu-dresden.de>
Date: Tue, 15 Feb 2022 00:49:32 +0100
Subject: [PATCH] Alignment weight tooltips (#43)

---
 src/main/resources/static/js/toolkit.js       | 19 ++++++++++++++++++-
 .../bootstrap/datasim/alignment.html          |  3 ++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/main/resources/static/js/toolkit.js b/src/main/resources/static/js/toolkit.js
index 118b1c8..8a86320 100644
--- 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
index 5397c21..6414906 100644
--- 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>