diff --git a/src/bar.js b/src/bar.js
index 7f52bb6..fc60db4 100644
--- a/src/bar.js
+++ b/src/bar.js
@@ -303,12 +303,18 @@ export default class Bar {
                 (e) =>
                     (timeout = setTimeout(() => {
                         this.show_popup(e.offsetX || e.layerX);
+                        document.getElementById(
+                            `highlight-${task_id}`,
+                        ).style.display = 'block';
                     }, 200)),
             );
 
             $.on(this.group, 'mouseleave', () => {
                 clearTimeout(timeout);
                 this.gantt.popup?.hide?.();
+
+                document.getElementById(`highlight-${task_id}`).style.display =
+                    'none';
             });
         }
 
diff --git a/src/index.js b/src/index.js
index fcfc028..6fcb23e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -569,6 +569,7 @@ export default class Gantt {
      * @returns Object containing the x-axis distance and date of the current date, or null if the current date is out of the gantt range.
      */
     computeGridHighlightDimensions(view_mode) {
+
         const today = new Date();
         if (today < this.gantt_start || today > this.gantt_end) return null;
         let diff_in_units = date_utils.diff(
@@ -610,6 +611,7 @@ export default class Gantt {
         if ($today) {
             $today.classList.add('current-date-highlight');
             $today.style.top = +$today.style.top.slice(0, -2) - 4 + 'px';
+
         }
     }
 
@@ -827,7 +829,6 @@ export default class Gantt {
             }
 
             bar_wrapper.classList.add('active');
-            if (this.popup) this.popup.parent.classList.add('hidden');
 
             if (this.popup) this.popup.parent.classList.add('hidden');