Use opacity instead of rendering and unrendering the tooltip.

Author: thomasheartman

frontend/src/component/insights/components/LineChart/ChartTooltip/ChartTooltip.tsx

@@ -6,6 +6,7 @@ import { useEffect, useState, type FC, type VFC } from 'react';
 import { objectId } from 'utils/objectId';
 
 export type TooltipState = {
+    opacity: number;
     caretX: number;
     caretY: number;
     title: string;
@@ -85,6 +86,7 @@ export const ChartTooltipContainer: FC<IChartTooltipProps> = ({
     return (
         <Box
             sx={(theme) => ({
+                opacity: tooltip?.opacity ?? 0,
                 top: 0,
                 left: 0,
                 transform: `translate(${left}px, ${top}px)`,

frontend/src/component/insights/components/LineChart/createTooltip.ts

@@ -8,12 +8,9 @@ export const createTooltip =
         tooltip: TooltipModel<any>;
     }) => {
         const tooltip = context.tooltip;
-        if (tooltip.opacity === 0) {
-            setTooltip(null);
-            return;
-        }
 
         setTooltip({
+            opacity: tooltip?.opacity,
             caretX: tooltip?.caretX,
             caretY: tooltip?.caretY,
             title: tooltip?.title?.join(' ') || '',