From dc7968b257494a845def92a17de29e267bd52225 Mon Sep 17 00:00:00 2001
From: Milos <tmilost>
Date: Fri, 12 Jan 2024 18:39:40 +0100
Subject: [PATCH] 62 - 63 - change dropdown with tooltip

---
 src/components/NegotiationForm.vue | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/components/NegotiationForm.vue b/src/components/NegotiationForm.vue
index 2429d77f..0409ba37 100644
--- 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() {