PMCORE-2722: Tooltips do not display in advanced search

rename component

fix task component

resources/assets/js/components/vuetable/TaskCell.vue

@@ -1,48 +1,65 @@
 <template>
-  <div class="v-task-cell">
-    <div v-for="item in data" v-bind:key="item.TITLE" class="d-flex mb-3">
-      <div v-bind:style="{ color: activeColor(item.CODE_COLOR) }">
-        <i class="fas fa-square"></i>
-      </div>
-      <div class="col .v-task-cell-ellipsis">
-        {{ item.TITLE }}
-      </div>
+    <div v-if="data.length" class="task-cell">
+        <div v-for="(item, index) in data" class="d-flex mb-3">
+            <div
+                v-bind:style="{ color: activeColor(item.CODE_COLOR) }"
+                :id="statusId + index"
+            >
+                <i class="fas fa-square"></i>
+            </div>
+            <b-popover :target="statusId + index" triggers="hover" placement="top">
+                <b> {{ item.DELAYED_TITLE }} </b> {{ item.DELAYED_MSG }}
+            </b-popover>
+            <div class="col ellipsis" v-b-popover.hover.top="item.TITLE">
+                {{ item.TITLE }}
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: "TaskCell",
-  props: ["data"],
-  data() {
-    return {
-      //Color map for ["In Progress", "overdue", "inDraft", "paused", "unnasigned"]
-      colorMap: ["green", "red", "orange", "aqua", "silver"],
-    };
-  },
-  methods: {
-    /**
-     * Get the style color to be applied in the square icon
-     * @param {number} - status color(1-5)
-     * @return {string} - color atribute string
-     */
-    activeColor: function (codeColor) {
-      return this.colorMap[codeColor - 1];
+    name: "TaskCell",
+    props: ["data"],
+    data() {
+        return {
+            colorMap: ["green", "red", "orange", "blue", "silver"],
+            statusId: "status-" + _.random(1000000)
+        };
     },
-  },
+    methods: {
+        /**
+         * Get the style color to be applied in the square icon
+         * @param {number} - status color(1-5)
+         * @return {string} - color atribute string
+         */
+        activeColor: function(codeColor) {
+            return this.colorMap[codeColor - 1];
+        }
+    }
 };
 </script>
 
-<style>
-.v-task-cell {
-  display: inline-flex;
+<style> 
+.popover {
+    max-width: 600px !important; 
+    min-width: 200px !important;
+}
+.task-cell {
+    font-size: normal;
 }
 
-.v-task-cell-ellipsis {
-  white-space: nowrap;
-  width: 140px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.ellipsis {
+    white-space: nowrap;
+    width: 140px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.color {
+    color: red;
+}
+.avatar {
+    color: "red";
+    width: "1.3em";
 }
 </style>