[Bug] fixed tooltip on nonAxisChart does not working

[hhjeee]

[Bug #3] fixed tooltip on nonAxisChart does not working

Related issue: #2720

As you can see on above video, the fixed tooltip on axisChart(Line chart) is working well.
But in the case of nonAxisChart(donut chart), fixed tooltip does not working.

Problem Solving Description

Tooltip.js의 seriesHoverByContext()함수에서는 차트에서 마우스 호버 이벤트가 발생했을 때 툴팁을 업데이트하고 표시하는 로직이 이루어집니다.

함수의 마지막 부분을 보면,

1. Fixed Tooltip 적용
   fixedTooltip이 활성화된 경우, drawFixedTooltipRect()가 호출되어 툴팁의 위치가 고정됩니다.

if (ttCtx.fixedTooltip) {
    ttCtx.drawFixedTooltipRect()
}

2. nonAxis Chart의 툴팁 위치 계산
   nonAxisChartsTooltips()가 실행되면서 mousemove 또는 touchmove 이벤트에 따라 clientX, clientY 기준으로 툴팁 위치가 다시 계산됩니다.

if (w.globals.axisCharts) {
      ttCtx.axisChartsTooltips({
        e,
        opt,
        tooltipRect: ttCtx.tooltipRect,
      })
    } else {
      // non-plot charts i.e pie/donut/circle
      ttCtx.nonAxisChartsTooltips({
        e,
        opt,
        tooltipRect: ttCtx.tooltipRect,
      })
    }

Issue

Fixed Tooltip이 적용된 후에도 nonAxisChartsTooltips()에서 재계산된 위치로 덮어씌워지면서 툴팁이 고정되지 않고 움직이는 문제가 발생합니다.

Solution

두 코드 블록의 실행 순서를 변경하여, nonAxisChartsTooltips()가 먼저 실행되고 이후 drawFixedTooltipRect()가 실행되도록 수정하면 해결할 수 있습니다.

---

Problem Solving Description

In Tooltip.js, the seriesHoverByContext() function handles updating and displaying the tooltip when a mouse hover event occurs on the chart.

At the end of this function, the following sequence is executed:

1. Applying the Fixed Tooltip
   If fixedTooltip is enabled, drawFixedTooltipRect() is called to set the tooltip's fixed position.

if (ttCtx.fixedTooltip) {
    ttCtx.drawFixedTooltipRect()
}

2. Calculating Tooltip Position for Non-Axis Charts
   The nonAxisChartsTooltips() function is executed, which recalculates the tooltip position based on clientX and clientY during mousemove or touchmove events.

if (w.globals.axisCharts) {
    ttCtx.axisChartsTooltips({
        e,
        opt,
        tooltipRect: ttCtx.tooltipRect,
    })
} else {
    // Non-plot charts (e.g., pie, donut, circle)
    ttCtx.nonAxisChartsTooltips({
        e,
        opt,
        tooltipRect: ttCtx.tooltipRect,
    })
}

Issue

Even after applying the fixed tooltip position, nonAxisChartsTooltips() recalculates the tooltip position, overriding the fixed position and causing the tooltip to move instead of staying fixed.

Solution

This issue can be resolved by changing the execution order of the two code blocks. If nonAxisChartsTooltips() runs first and drawFixedTooltipRect() runs afterward, the tooltip position will be recalculated first, and then the fixed position will be applied correctly.