From 9a061f4a52ddd4d30bcb778bd7b83ab8c4f0dd3e Mon Sep 17 00:00:00 2001
From: Martin Artnik <martin@scinote.net>
Date: Mon, 30 Jun 2025 11:21:14 +0200
Subject: [PATCH] Initialize custom tooltips for step-result link buttons
 [SCI-12074]

---
 app/javascript/vue/protocol/step.vue  | 15 ++++++++++++---
 app/javascript/vue/results/result.vue | 15 ++++++++++++---
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/app/javascript/vue/protocol/step.vue b/app/javascript/vue/protocol/step.vue
index bd754da5f..23a6670d9 100644
--- a/app/javascript/vue/protocol/step.vue
+++ b/app/javascript/vue/protocol/step.vue
@@ -85,13 +85,13 @@
         ></span> <!-- Hidden element to support legacy code -->
         <template v-if="!inRepository">
           <template v-if="step.attributes.results.length == 0">
-            <button v-if="urls.update_url" :title="i18n.t('protocols.steps.link_results')" class="btn btn-light icon-btn" @click="this.openLinkResultsModal = true">
+            <button ref="linkButton" v-if="urls.update_url" :title="i18n.t('protocols.steps.link_results')" class="btn btn-light icon-btn" @click="this.openLinkResultsModal = true">
               <i class="sn-icon sn-icon-results"></i>
             </button>
           </template>
           <GeneralDropdown v-else ref="linkedResultsDropdown"  position="right">
             <template v-slot:field>
-              <button class="btn btn-light icon-btn" :title="i18n.t('protocols.steps.linked_results')">
+              <button ref="linkButton" class="btn btn-light icon-btn" :title="i18n.t('protocols.steps.linked_results')">
                 <i class="sn-icon sn-icon-results"></i>
                 <span class="absolute top-1 right-1 h-4 min-w-4 bg-sn-science-blue text-white flex items-center justify-center rounded-full text-[10px]">
                   {{ step.attributes.results.length }}
@@ -403,6 +403,11 @@
       $(this.$refs.elementsDropdownButton).on('shown.bs.dropdown hidden.bs.dropdown', () => {
         this.handleDropdownPosition(this.$refs.elementsDropdownButton, this.$refs.elementsDropdown)
       });
+
+      window.initTooltip(this.$refs.linkButton);
+    },
+    beforeUnmount() {
+      window.destroyTooltip(this.$refs.linkButton);
     },
     computed: {
       reorderableElements() {
@@ -805,10 +810,14 @@
         });
       },
       updateLinkedResults(results) {
+        window.destroyTooltip(this.$refs.linkButton);
+
         this.$emit('step:update', {
           results: results,
           position: this.step.attributes.position
-        })
+        });
+
+        this.$nextTick(() => window.initTooltip(this.$refs.linkButton));
       },
       resultUrl(result_id, archived) {
         return my_module_results_path({my_module_id: this.step.attributes.my_module_id, result_id: result_id, view_mode: (archived ? 'archived' : 'active') });
diff --git a/app/javascript/vue/results/result.vue b/app/javascript/vue/results/result.vue
index 2329352fa..ce8e89413 100644
--- a/app/javascript/vue/results/result.vue
+++ b/app/javascript/vue/results/result.vue
@@ -66,13 +66,13 @@
             tabindex="0"
           ></span> <!-- Hidden element to support legacy code -->
           <tempplate v-if="result.attributes.steps.length == 0">
-            <button v-if="urls.update_url" :title="i18n.t('my_modules.results.link_steps')" class="btn btn-light icon-btn" @click="this.openLinkStepsModal = true">
+            <button v-if="urls.update_url" ref="linkButton" :title="i18n.t('my_modules.results.link_steps')" class="btn btn-light icon-btn" @click="this.openLinkStepsModal = true">
               {{ i18n.t('my_modules.results.link_to_step') }}
             </button>
           </tempplate>
           <GeneralDropdown v-else ref="linkedStepsDropdown"  position="right">
             <template v-slot:field>
-              <button class="btn btn-light icon-btn" :title="i18n.t('my_modules.results.linked_steps')">
+              <button ref="linkButton" class="btn btn-light icon-btn" :title="i18n.t('my_modules.results.linked_steps')">
                 <i class="sn-icon sn-icon-steps"></i>
                 <span class="absolute top-1 -right-1 h-4 min-w-4 bg-sn-science-blue text-white flex items-center justify-center rounded-full text-[10px]">
                   {{ result.attributes.steps.length }}
@@ -304,6 +304,11 @@ export default {
       }
       this.$emit('result:collapsed');
     });
+
+    window.initTooltip(this.$refs.linkButton);
+  },
+  beforeUnmount() {
+    window.destroyTooltip(this.$refs.linkButton);
   },
   computed: {
     reorderableElements() {
@@ -629,9 +634,13 @@ export default {
       });
     },
     updateLinkedSteps(steps) {
+      window.destroyTooltip(this.$refs.linkButton);
+
       this.$emit('result:update', this.result.id,{
         steps: steps
-      })
+      });
+
+      this.$nextTick(() => window.initTooltip(this.$refs.linkButton));
     },
     protocolUrl(step_id) {
       return protocols_my_module_path({ id: this.result.attributes.my_module_id }, { step_id: step_id })