fix custom cases list

resources/assets/js/components/utils/CustomTooltip.vue

@@ -2,7 +2,9 @@
     <span
         :id="`label-${data.id}`"
         @mouseover="hoverHandler"
-        :title="labelTooltip"
+        v-b-tooltip.hover
+        @mouseleave="unhoverHandler"
+        v-bind:class="{highlightText: isHighlight}"
     >
         {{ data.title }}
         <b-tooltip :target="`label-${data.page}`" :ref="`tooltip-${data.page}`">
@@ -17,21 +19,20 @@ import api from "./../../api/index";
 export default {
     name: "CustomTooltip",
     props: {
-        data: Object,
+        data: Object
     },
     data() {
         return {
             labelTooltip: "",
+            hovering: "",
+            show: false,
             menuMap: {
                 CASES_INBOX: "inbox",
                 CASES_DRAFT: "draft",
                 CASES_PAUSED: "paused",
-                CASES_SELFSERVICE: "unassigned",
-                todo: "inbox",
-                draft: "draft",
-                paused: "paused",
-                unassigned: "unassigned",
+                CASES_SELFSERVICE: "unassigned"
             },
+            isHighlight: false
         };
     },
     methods: {
@@ -39,7 +40,7 @@ export default {
          * Delay the hover event
          */
         hoverHandler() {
-            this.setTooltip();
+            this.hovering = setTimeout(() => { this.setTooltip() }, 3000);
         },
         /**
          * Reset the delay and hide the tooltip
@@ -48,6 +49,7 @@ export default {
             let key = `tooltip-${this.data.page}`;
             this.labelTooltip = "";
             this.$refs[key].$emit("close");
+            clearTimeout(this.hovering);
         },
         /**
          * Set the label to show in the tooltip
@@ -58,8 +60,20 @@ export default {
                 let key = `tooltip-${that.data.page}`;
                 that.labelTooltip = response.data.label;
                 that.$refs[key].$emit("open");
+                that.isHighlight = false;
             });
         },
+        /**
+         * Set bold the label 
+         */
+        setHighlight() {
+            this.isHighlight = true;
+        }
     },
 };
 </script>
+<style>
+.highlightText {
+    font-weight: 900;
+}
+</style>