Move initialization of Tooltips to app/javascript

With this new method, Tooltips are correctly initialized and potential loading errors/race conditions are prevented.

Author: MrSerth

app/assets/javascripts/base.js

@@ -66,9 +66,6 @@ $(document).on('turbo-migration:load', function() {
         });
     }
 
-    // Enable all tooltips
-    $('[data-bs-toggle="tooltip"]').tooltip();
-
     // Enable sorttable again, as it is disabled otherwise by Turbo
     if (sorttable) {
         sorttable.init.done = false;

app/assets/javascripts/editor/editor.js

@@ -935,10 +935,6 @@ var CodeOceanEditor = {
         $('#output_sidebar').removeClass('output-col').addClass('output-col-collapsed');
     },
 
-    initializeSideBarTooltips: function () {
-        $('[data-bs-toggle="tooltip"]').tooltip()
-    },
-
     initializeDescriptionToggle: function () {
         $('#exercise-headline').on('click', this.toggleDescriptionCard.bind(this));
         $('a#toggle').on('click', this.toggleDescriptionCard.bind(this));
@@ -1096,7 +1092,6 @@ var CodeOceanEditor = {
         this.initializeSideBarCollapse();
         this.initializeOutputBarToggle();
         this.initializeDescriptionToggle();
-        this.initializeSideBarTooltips();
         this.initializeInterventionTimer();
         this.initPrompt();
         this.renderScore();

app/javascript/tooltips.js

@@ -0,0 +1,11 @@
+let tooltipList = [];
+
+export function initializeTooltips() {
+  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+  tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
+}
+
+export function destroyTooltips() {
+  tooltipList.map(tooltip => tooltip.dispose());
+  tooltipList = [];
+}

app/javascript/turbo-migration.js

@@ -1,3 +1,5 @@
+import { initializeTooltips, destroyTooltips } from './tooltips';
+
 // `turbo:load` is dispatched earlier than the previous `turbolinks:load` event.
 // This is causing issues for our migration, since some assets are not fully loaded
 // when the event is dispatched. To ensure that the DOM content is fully rendered,
@@ -46,10 +48,16 @@ function forwardTurboLoad(event) {
   requestAnimationFrame(() => {
     const delayedEvent = new CustomEvent('turbo-migration:load', { detail: { ...event.detail } });
     document.dispatchEvent(delayedEvent);
+
+    initializeTooltips();
   });
 }
 
 const flushQueue = (queue) => {
   queue.forEach(forwardTurboLoad);
   queue.length = 0;
 };
+
+document.addEventListener('turbo:visit', (event) => {
+  destroyTooltips();
+})