feat: add tooltips to prepared scenarios

Signed-off-by: Matej Focko <mfocko@redhat.com>

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>

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);