Merge pull request #4931 from apexcharts/revert-4929-fix/tooltip-active-state-blink

Revert "Fix tooltip stability for smoother chart interaction"

Author: junedchhipa

src/modules/tooltip/Tooltip.js

@@ -529,19 +529,19 @@ export default class Tooltip {
       syncedCharts = this.ctx.getSyncedCharts()
     }
 
-    const isStickyTooltip =
+    let isStickyTooltip =
       w.globals.xyCharts ||
       (w.config.chart.type === 'bar' &&
         !w.globals.isBarHorizontal &&
         this.tooltipUtil.hasBars() &&
         this.tConfig.shared) ||
       (w.globals.comboCharts && this.tooltipUtil.hasBars())
 
-    const isInteractionInProcess = (e.type === 'mousemove' || e.type === 'touchmove' || e.type === 'mouseup')
-    const isInteractionEnd = (e.type === 'mouseout' || e.type === 'touchend')
-    const isChartContextTarget = w.globals.dom.baseEl.contains(e.relatedTarget)
-    
-    if (isInteractionInProcess) {
+    if (
+      e.type === 'mousemove' ||
+      e.type === 'touchmove' ||
+      e.type === 'mouseup'
+    ) {
       // there is no series to hover over
       if (
         w.globals.collapsedSeries.length +
@@ -555,9 +555,10 @@ export default class Tooltip {
         xcrosshairs.classList.add('apexcharts-active')
       }
 
-      const hasYAxisTooltip = this.yaxisTooltips.includes(true)
-
-      if (this.ycrosshairs !== null && hasYAxisTooltip) {
+      const hasYAxisTooltip = this.yaxisTooltips.filter((b) => {
+        return b === true
+      })
+      if (this.ycrosshairs !== null && hasYAxisTooltip.length) {
         this.ycrosshairs.classList.add('apexcharts-active')
       }
 
@@ -567,10 +568,10 @@ export default class Tooltip {
       ) {
         this.handleStickyTooltip(e, clientX, clientY, opt)
       } else {
-        const isHeatmap = w.config.chart.type === 'heatmap'
-        const isTreemap = w.config.chart.type === 'treemap'
-
-        if (isHeatmap || isTreemap) {
+        if (
+          w.config.chart.type === 'heatmap' ||
+          w.config.chart.type === 'treemap'
+        ) {
           let markerXY = this.intersect.handleHeatTreeTooltip({
             e,
             opt,
@@ -581,8 +582,8 @@ export default class Tooltip {
           x = markerXY.x
           y = markerXY.y
 
-          tooltipEl.style.left = `${x}px`
-          tooltipEl.style.top = `${y}px`
+          tooltipEl.style.left = x + 'px'
+          tooltipEl.style.top = y + 'px'
         } else {
           if (this.tooltipUtil.hasBars()) {
             this.intersect.handleBarTooltip({
@@ -611,7 +612,7 @@ export default class Tooltip {
 
       w.globals.dom.baseEl.classList.add('apexcharts-tooltip-active')
       opt.tooltipEl.classList.add('apexcharts-active')
-    } else if (!isChartContextTarget && isInteractionEnd) {
+    } else if (e.type === 'mouseout' || e.type === 'touchend') {
       this.handleMouseOut(opt)
     }
   }