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

@@ -55,9 +55,6 @@ $(document).on('turbo-migration:load', function () {
     });
   }
 
-  // Enable all tooltips
-  $('[data-bs-toggle="tooltip"]').tooltip();
-
   // Ensure that the tab button will be in active (selected) state for each page that has 'option' query (e.g. groups or messages page)
   $('#' + $('#option').val()).addClass('selected');
 });

app/assets/javascripts/bootstrap.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/tooltips.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();
+})