[charts] Enable tooltip disable portal

Author: alexfauquette

docs/data/charts/bars/bars.md

@@ -207,9 +207,9 @@ Here's how the Bar Chart is composed:
         <ChartsAxisHighlight />
       </g>
       <ChartsAxis />
-      <ChartsTooltip />
       <ChartsClipPath id={clipPathId} />
     </ChartsSurface>
+    <ChartsTooltip />
   </ChartsWrapper>
 </ChartDataProvider>
 ```

docs/data/charts/lines/lines.md

@@ -294,9 +294,9 @@ Here's how the Line Chart is composed:
         <MarkPlot />
       </g>
       <LineHighlightPlot />
-      <ChartsTooltip />
       <ChartsClipPath id={clipPathId} />
     </ChartsSurface>
+    <ChartsTooltip />
   </ChartsWrapper>
 </ChartDataProvider>
 ```

docs/data/charts/pie/pie.md

@@ -138,8 +138,8 @@ Here's how the Pie Chart is composed:
     <ChartsSurface>
       <PiePlot />
       <ChartsOverlay />
-      <ChartsTooltip trigger="item" />
     </ChartsSurface>
+    <ChartsTooltip trigger="item" />
   </ChartsWrapper>
 </ChartDataProvider>
 ```

docs/data/charts/radar/radar.md

@@ -137,8 +137,8 @@ Here's how the Radar Chart is composed:
       <RadarSeriesMarks />
       {/* Other components */}
       <ChartsOverlay />
-      <ChartsTooltip />
     </ChartsSurface>
+    <ChartsTooltip />
   </ChartsWrapper>
 </RadarDataProvider>
 ```

docs/data/charts/scatter/scatter.md

@@ -154,8 +154,8 @@ Here's how the Scatter Chart is composed:
       </g>
       <ChartsOverlay />
       <ChartsAxisHighlight />
-      <ChartsTooltip trigger="item" />
     </ChartsSurface>
+    <ChartsTooltip trigger="item" />
   </ChartsWrapper>
 </ChartDataProvider>
 ```

docs/data/charts/tooltip/tooltip.md

@@ -178,6 +178,8 @@ To apply the same style as we're trying to apply above, we need to use the `sx`
 
 {{"demo": "TooltipStyle.js"}}
 
+You can also disable the portal by setting `slotProps.tooltip.disablePortal` to `true`.
+
 ## Composition
 
 If you're using composition, by default, the axis listens for mouse events to get its current x/y values.

packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx

@@ -94,10 +94,10 @@ const BarChartPro = React.forwardRef(function BarChartPro(
           </g>
           <ChartsAxis {...chartsAxisProps} />
           <ChartZoomSlider />
-          {!props.loading && <Tooltip {...props.slotProps?.tooltip} />}
           <ChartsClipPath {...clipPathProps} />
           {children}
         </ChartsSurface>
+        {!props.loading && <Tooltip {...props.slotProps?.tooltip} />}
       </ChartsWrapper>
     </ChartDataProviderPro>
   );

packages/x-charts-pro/src/FunnelChart/FunnelChart.tsx

@@ -96,10 +96,10 @@ const FunnelChart = React.forwardRef(function FunnelChart(
           <FunnelPlot {...funnelPlotProps} />
           <ChartsOverlay {...overlayProps} />
           <ChartsAxisHighlight {...axisHighlightProps} />
-          {!themedProps.loading && <Tooltip {...themedProps.slotProps?.tooltip} trigger="item" />}
           <ChartsAxis {...chartsAxisProps} />
           {children}
         </ChartsSurface>
+        {!themedProps.loading && <Tooltip {...themedProps.slotProps?.tooltip} trigger="item" />}
       </ChartsWrapper>
     </ChartDataProviderPro>
   );

packages/x-charts-pro/src/Heatmap/Heatmap.tsx

@@ -7,6 +7,7 @@ import { MakeOptional } from '@mui/x-internals/types';
 import { interpolateRgbBasis } from '@mui/x-charts-vendor/d3-interpolate';
 import { ChartsAxis, ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
 import { ChartsTooltipProps } from '@mui/x-charts/ChartsTooltip';
+import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import {
   ChartsAxisSlots,
   ChartsAxisSlotProps,
@@ -22,13 +23,14 @@ import {
   ChartsOverlaySlots,
 } from '@mui/x-charts/ChartsOverlay';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants';
-import { ChartContainerPro, ChartContainerProProps } from '../ChartContainerPro';
+import { ChartContainerProProps } from '../ChartContainerPro';
 import { HeatmapSeriesType } from '../models/seriesType/heatmap';
 import { HeatmapPlot } from './HeatmapPlot';
 import { seriesConfig as heatmapSeriesConfig } from './seriesConfig';
 import { HeatmapTooltip, HeatmapTooltipProps } from './HeatmapTooltip/HeatmapTooltip';
 import { HeatmapItemSlotProps, HeatmapItemSlots } from './HeatmapItem';
 import { HEATMAP_PLUGINS, HeatmapPluginsSignatures } from './Heatmap.plugins';
+import { ChartDataProviderPro } from '../ChartDataProviderPro';
 
 export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, HeatmapItemSlots {
   /**
@@ -181,8 +183,7 @@ const Heatmap = React.forwardRef(function Heatmap(
   const Tooltip = props.slots?.tooltip ?? HeatmapTooltip;
 
   return (
-    <ChartContainerPro<'heatmap', HeatmapPluginsSignatures>
-      ref={ref}
+    <ChartDataProviderPro<'heatmap', HeatmapPluginsSignatures>
       seriesConfig={seriesConfig}
       series={series.map((s) => ({
         type: 'heatmap',
@@ -196,23 +197,24 @@ const Heatmap = React.forwardRef(function Heatmap(
       zAxis={zAxisWithDefault}
       colors={colors}
       dataset={dataset}
-      sx={sx}
       disableAxisListener
       highlightedItem={highlightedItem}
       onHighlightChange={onHighlightChange}
       onAxisClick={onAxisClick}
       plugins={HEATMAP_PLUGINS}
     >
-      <g clipPath={`url(#${clipPathId})`}>
-        <HeatmapPlot slots={slots} slotProps={slotProps} />
-        <ChartsOverlay loading={loading} slots={slots} slotProps={slotProps} />
-      </g>
-      <ChartsAxis slots={slots} slotProps={slotProps} />
-      {!loading && <Tooltip {...slotProps?.tooltip} />}
+      <ChartsSurface ref={ref} sx={sx}>
+        <g clipPath={`url(#${clipPathId})`}>
+          <HeatmapPlot slots={slots} slotProps={slotProps} />
+          <ChartsOverlay loading={loading} slots={slots} slotProps={slotProps} />
+        </g>
+        <ChartsAxis slots={slots} slotProps={slotProps} />
 
-      <ChartsClipPath id={clipPathId} />
-      {children}
-    </ChartContainerPro>
+        <ChartsClipPath id={clipPathId} />
+        {children}
+      </ChartsSurface>
+      {!loading && <Tooltip {...slotProps?.tooltip} />}
+    </ChartDataProviderPro>
   );
 });
 

packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx

@@ -107,10 +107,10 @@ const LineChartPro = React.forwardRef(function LineChartPro(
             <MarkPlot {...markPlotProps} />
           </g>
           <LineHighlightPlot {...lineHighlightPlotProps} />
-          {!props.loading && <Tooltip {...props.slotProps?.tooltip} />}
           <ChartsClipPath {...clipPathProps} />
           {children}
         </ChartsSurface>
+        {!props.loading && <Tooltip {...props.slotProps?.tooltip} />}
       </ChartsWrapper>
     </ChartDataProviderPro>
   );