From df6ba00f2bd3eed1232484d609de160ee23e2f9b Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Fri, 16 Oct 2026 22:33:05 +0200
Subject: [PATCH] #142 improve tooltips

---
 src/assets/styles/tooltips.css |  1 +
 src/tooltipMixin.js            | 38 +++++++++++++++++++---------------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/assets/styles/tooltips.css b/src/assets/styles/tooltips.css
index 92420ed..7a91a15 100644
--- a/src/assets/styles/tooltips.css
+++ b/src/assets/styles/tooltips.css
@@ -10,4 +10,5 @@
   border-radius: var(--border-radius-medium);
   white-space: nowrap;
   z-index: 999;
+  pointer-events: none;
 }
diff --git a/src/tooltipMixin.js b/src/tooltipMixin.js
index d0e101c..a76a48e 100644
--- a/src/tooltipMixin.js
+++ b/src/tooltipMixin.js
@@ -3,7 +3,8 @@ export default {
     return {
       tooltipStyle: {
         visibility: 'hidden'
-      }
+      },
+      showTooltipTimeout: null
     }
   },
   computed: {
@@ -13,27 +14,30 @@ export default {
   },
   methods: {
     showTooltip(e, tooltipPosition) {
-      const position = tooltipPosition
-        ? tooltipPosition.split('-')
-        : ['top', 'right']
-      const offset = 12
+      this.showTooltipTimeout = setTimeout(() => {
+        const position = tooltipPosition
+          ? tooltipPosition.split('-')
+          : ['top', 'right']
+        const offset = 12
 
-      if (position[0] === 'top') {
-        this.tooltipStyle.top = e.clientY - offset + 'px'
-      } else {
-        this.tooltipStyle.top = e.clientY + offset + 'px'
-      }
+        if (position[0] === 'top') {
+          this.tooltipStyle.top = e.clientY - offset + 'px'
+        } else {
+          this.tooltipStyle.top = e.clientY + offset + 'px'
+        }
 
-      if (position[1] === 'right') {
-        this.tooltipStyle.left = e.clientX + offset + 'px'
-      } else {
-        this.tooltipStyle.left =
-          e.clientX - offset - this.tooltipElement.offsetWidth + 'px'
-      }
+        if (position[1] === 'right') {
+          this.tooltipStyle.left = e.clientX + offset + 'px'
+        } else {
+          this.tooltipStyle.left =
+            e.clientX - offset - this.tooltipElement.offsetWidth + 'px'
+        }
 
-      this.tooltipStyle.visibility = 'visible'
+        this.tooltipStyle.visibility = 'visible'
+      }, 500)
     },
     hideTooltip() {
+      this.showTooltipTimeout && clearTimeout(this.showTooltipTimeout)
       this.tooltipStyle.visibility = 'hidden'
     }
   }