Enhance tooltip for department goal progress by improving styling and positioning

src/views/dashboards/departmentDashboard/modules/goals/DepartmentGoals.vue

@@ -410,7 +410,13 @@ const getGoalApplicableDaysInPeriod = (goal, fromDate, toDate) => {
                     <div v-for="deptId in goal.departments" :key="deptId" class="mb-2">
                         <div class="is-flex is-justify-content-space-between mb-1 is-size-7">
                           <span><strong>{{ getDepartmentName(deptId) }}</strong></span>
-                          <b-tooltip position="is-left" type="is-dark">
+                          <b-tooltip
+                            position="is-right"
+                            type="is-light"
+                            append-to-body
+                            multilined
+                            class="goal-progress-tooltip"
+                          >
                             <template v-slot:content>
                               <div>
                                 <!-- Progress in selected timeframe for this department -->
@@ -543,3 +549,28 @@ const getGoalApplicableDaysInPeriod = (goal, fromDate, toDate) => {
   }
 }
 </style>
+
+<style>
+.goal-progress-tooltip .tooltip-content {
+  min-width: 280px;
+  max-width: 340px;
+  padding: 0.9rem 1rem;
+  border-radius: 10px;
+  background: #ffffff;
+  color: #363636;
+  border: 1px solid #e8e8e8;
+  box-shadow: 0 12px 28px rgba(10, 10, 10, 0.14);
+}
+
+.goal-progress-tooltip .tooltip-content .divider {
+  color: #7a7a7a;
+}
+
+.goal-progress-tooltip .tooltip-content .has-text-white {
+  color: #363636 !important;
+}
+
+.goal-progress-tooltip .tooltip-content .has-text-grey {
+  color: #7a7a7a !important;
+}
+</style>