Merge pull request #75 from BBMRI-ERIC/fix/add_info_icon

62 - 63 - change dropdown with tooltip
BBMRI-ERIC · Jan 13, 2024 · 4056112 · 4056112
2 parents ade3d53 + dc7968b
commit 4056112
Showing 1 changed file with 11 additions and 14 deletions.
diff --git a/src/components/NegotiationForm.vue b/src/components/NegotiationForm.vue
@@ -81,15 +81,11 @@
             </div>
           </div>
         </div>
-        <div v-if="section.description" class="mb-4 d-flex justify-content-end">
-          <div class="dropdown mx-2">
-            <i data-bs-toggle="dropdown"
-            aria-expanded="false" class="bi bi-info-circle"/>
-            <div class="dropdown-menu p-3 text-body-secondary">
-              <p> {{section.description}} </p>
-            </div>
-          </div>
+
+        <div v-if="section.description" class="mx-3 d-flex justify-content-end">
+          <i  class="py-1 bi bi-info-circle" data-bs-toggle="tooltip" :data-bs-title="section.description"></i>
         </div>
+
         <div
           v-for="criteria in section.accessCriteria"
           :key="criteria.name"
@@ -99,12 +95,7 @@
             {{ criteria.label }}
           </label> 
 
-          <span v-if="criteria.description" class="dropdown mx-2">
-              <i data-bs-toggle="dropdown" aria-expanded="false" class="bi bi-info-circle" />
-              <div class="dropdown-menu p-3 text-body-secondary">
-                <p> {{criteria.description}} </p>
-              </div>
-           </span>
+          <i v-if="criteria.description" class="mx-2 py-1 bi bi-info-circle" data-bs-toggle="tooltip" :data-bs-title="criteria.description"></i>
 
           <textarea
             v-if="criteria.type === 'textarea'"
@@ -179,6 +170,7 @@
 </template>
 
 <script>
+import { Tooltip } from 'bootstrap'
 import FeedbackModal from "@/components/modals/FeedbackModal.vue"
 import ResourcesList from "@/components/ResourcesList.vue"
 import { FormWizard, TabContent } from "vue3-form-wizard"
@@ -242,6 +234,11 @@ export default {
       }
     }
   },
+  mounted () {
+    new Tooltip(document.body, {
+      selector: "[data-bs-toggle='tooltip']",
+    })
+  },
   methods: {
     ...mapActions(["retrieveRequestById", "retrieveAccessCriteriaByResourceId", "createNegotiation"]),
     async startNegotiation() {