move Tooltip outside the Box

frontend/taipy-gui/src/components/Taipy/Chart.tsx

@@ -615,40 +615,38 @@ const Chart = (props: ChartProp) => {
     );
 
     return render ? (
-        <Box id={id} data-testid={props.testId} className={className} ref={plotRef}>
-            <Tooltip title={hover || ""}>
-                <div>
-                    <Suspense fallback={<Skeleton key="skeleton" sx={skelStyle}/>}>
-                        {Array.isArray(props.figure) && props.figure.length && props.figure[0].data !== undefined ? (
-                            <Plot
-                                data={props.figure[0].data as Data[]}
-                                layout={layout}
-                                style={style}
-                                onRelayout={onRelayout}
-                                onAfterPlot={onAfterPlot}
-                                onSelected={onSelect}
-                                onDeselect={onSelect}
-                                config={plotConfig}
-                                useResizeHandler
-                            />
-                        ) : (
-                            <Plot
-                                data={dataPl}
-                                layout={layout}
-                                style={style}
-                                onRelayout={onRelayout}
-                                onAfterPlot={onAfterPlot}
-                                onSelected={isOnClick(config.types) ? undefined : onSelect}
-                                onDeselect={isOnClick(config.types) ? undefined : onSelect}
-                                onClick={isOnClick(config.types) ? onSelect : undefined}
-                                config={plotConfig}
-                                useResizeHandler
-                            />
-                        )}
-                    </Suspense>
-                </div>
-            </Tooltip>
-        </Box>
+        <Tooltip title={hover || ""}>
+            <Box id={id} data-testid={props.testId} className={className} ref={plotRef}>
+                <Suspense fallback={<Skeleton key="skeleton" sx={skelStyle}/>}>
+                    {Array.isArray(props.figure) && props.figure.length && props.figure[0].data !== undefined ? (
+                        <Plot
+                            data={props.figure[0].data as Data[]}
+                            layout={layout}
+                            style={style}
+                            onRelayout={onRelayout}
+                            onAfterPlot={onAfterPlot}
+                            onSelected={onSelect}
+                            onDeselect={onSelect}
+                            config={plotConfig}
+                            useResizeHandler
+                        />
+                    ) : (
+                        <Plot
+                            data={dataPl}
+                            layout={layout}
+                            style={style}
+                            onRelayout={onRelayout}
+                            onAfterPlot={onAfterPlot}
+                            onSelected={isOnClick(config.types) ? undefined : onSelect}
+                            onDeselect={isOnClick(config.types) ? undefined : onSelect}
+                            onClick={isOnClick(config.types) ? onSelect : undefined}
+                            config={plotConfig}
+                            useResizeHandler
+                        />
+                    )}
+                </Suspense>
+            </Box>
+        </Tooltip>
     ) : null;
 };
 

frontend/taipy-gui/src/components/Taipy/Metric.tsx

@@ -159,20 +159,18 @@ const Metric = (props: MetricProps) => {
     ])
 
     return (
-        <Box data-testid={props.testId} className={className}>
-            <Tooltip title={hover || ""}>
-                <div>
-                    <Suspense fallback={<Skeleton key="skeleton" sx={skelStyle}/>}>
-                        <Plot
-                            data={data}
-                            layout={layout}
-                            style={style}
-                            useResizeHandler
-                        />
-                    </Suspense>
-                </div>
-            </Tooltip>
-        </Box>
+        <Tooltip title={hover || ""}>
+            <Box data-testid={props.testId} className={className}>
+                <Suspense fallback={<Skeleton key="skeleton" sx={skelStyle}/>}>
+                    <Plot
+                        data={data}
+                        layout={layout}
+                        style={style}
+                        useResizeHandler
+                    />
+                </Suspense>
+            </Box>
+        </Tooltip>
     );
 }