#142 improve tooltips

src/assets/styles/tooltips.css

@@ -10,4 +10,5 @@
   border-radius: var(--border-radius-medium);
   white-space: nowrap;
   z-index: 999;
+  pointer-events: none;
 }

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'
     }
   }