From f779c349c308f031c4bdf52baf2e8e520051d393 Mon Sep 17 00:00:00 2001
From: Matej Focko <mfocko@redhat.com>
Date: Tue, 17 May 2022 14:39:09 +0200
Subject: [PATCH] feat: add tooltips to prepared scenarios

Signed-off-by: Matej Focko <mfocko@redhat.com>
---
 index.html       | 13 +++++++++++--
 visualization.js |  7 +++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 22572e2..fd54a68 100755
--- a/index.html
+++ b/index.html
@@ -102,12 +102,15 @@
           <div
             class="btn-group-vertical"
             role="group"
-            aria-label="Basic outlined example"
+            aria-label="Prepared scenarios"
           >
             <button
               type="button"
               class="btn btn-outline-primary"
               onclick="prepareSingleRotationAfterDelete()"
+              data-bs-toggle="tooltip"
+              data-bs-placement="right"
+              title="This scenario shows a single rotation being performed after a deletion of key 2 from the prepared tree."
             >
               Single rotation after delete
             </button>
@@ -115,6 +118,9 @@
               type="button"
               class="btn btn-outline-primary"
               onclick="prepareDoubleRotationAfterDelete()"
+              data-bs-toggle="tooltip"
+              data-bs-placement="right"
+              title="This scenario shows a double rotation being performed after a deletion of key 1 from the prepared tree."
             >
               Double rotation after delete
             </button>
@@ -122,6 +128,9 @@
               type="button"
               class="btn btn-outline-primary"
               onclick="prepareDemotionOfBothNodesDuringDelete()"
+              data-bs-toggle="tooltip"
+              data-bs-placement="right"
+              title="This scenario shows a demotion of both parent and sibling of the current node after a deletion of key 2 from the prepared tree."
             >
               Demotion of both parent and sibling during deletion
             </button>
@@ -144,11 +153,11 @@
   <script src="ravl.js"></script>
 
   <script src="recorder.js"></script>
-  <script src="visualization.js"></script>
 
   <script
     src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
     crossorigin="anonymous"
   ></script>
+  <script src="visualization.js"></script>
 </body>
diff --git a/visualization.js b/visualization.js
index 33dd2a3..6053b60 100644
--- a/visualization.js
+++ b/visualization.js
@@ -91,6 +91,13 @@ function prepareDemotionOfBothNodesDuringDelete() {
 }
 // #endregion prepared scenarios
 
+const tooltipTriggerList = document.querySelectorAll(
+    '[data-bs-toggle="tooltip"]'
+);
+const tooltipList = [...tooltipTriggerList].map(
+    (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl)
+);
+
 function render() {
     recorder.render();
     setTimeout(render);