diff --git a/docs/data/charts/tooltip/CustomAxisTooltip.js b/docs/data/charts/tooltip/CustomAxisTooltip.js
index 0d0693111c49c..9689757aa66a9 100644
--- a/docs/data/charts/tooltip/CustomAxisTooltip.js
+++ b/docs/data/charts/tooltip/CustomAxisTooltip.js
@@ -1,82 +1,79 @@
 import * as React from 'react';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
-import { ChartsTooltipContainer, useAxisTooltip } from '@mui/x-charts/ChartsTooltip';
+import { useAxisTooltip } from '@mui/x-charts/ChartsTooltip';
 
 export function CustomAxisTooltip() {
   const tooltipData = useAxisTooltip();
 
-  if (!tooltipData) {
-    // No data to display
+  if (tooltipData === null) {
     return null;
   }
   return (
-    <ChartsTooltipContainer trigger="axis">
-      <Paper
-        elevation={0}
-        sx={{
-          m: 1,
-          border: 'solid',
-          borderWidth: 2,
-          borderColor: 'divider',
-          table: { borderSpacing: 0 },
-          thead: {
-            td: {
-              px: 1.5,
-              py: 0.75,
-              borderBottom: 'solid',
-              borderWidth: 2,
-              borderColor: 'divider',
-            },
+    <Paper
+      elevation={0}
+      sx={{
+        m: 1,
+        border: 'solid',
+        borderWidth: 2,
+        borderColor: 'divider',
+        table: { borderSpacing: 0 },
+        thead: {
+          td: {
+            px: 1.5,
+            py: 0.75,
+            borderBottom: 'solid',
+            borderWidth: 2,
+            borderColor: 'divider',
           },
-          tbody: {
-            'tr:first-child': { td: { paddingTop: 1.5 } },
-            'tr:last-child': { td: { paddingBottom: 1.5 } },
-            tr: {
-              'td:first-child': { paddingLeft: 1.5 },
-              'td:last-child': { paddingRight: 1.5 },
-              td: {
-                paddingRight: '7px',
-                paddingBottom: '10px',
-              },
+        },
+        tbody: {
+          'tr:first-child': { td: { paddingTop: 1.5 } },
+          'tr:last-child': { td: { paddingBottom: 1.5 } },
+          tr: {
+            'td:first-child': { paddingLeft: 1.5 },
+            'td:last-child': { paddingRight: 1.5 },
+            td: {
+              paddingRight: '7px',
+              paddingBottom: '10px',
             },
           },
-        }}
-      >
-        <table>
-          <thead>
-            <tr>
-              <td colSpan={3}>
-                <Typography>{tooltipData.axisFormattedValue}</Typography>
+        },
+      }}
+    >
+      <table>
+        <thead>
+          <tr>
+            <td colSpan={3}>
+              <Typography>{tooltipData.axisFormattedValue}</Typography>
+            </td>
+          </tr>
+        </thead>
+        <tbody>
+          {tooltipData.seriesItems.map((seriesItem) => (
+            <tr key={seriesItem.seriesId}>
+              <td aria-label={`${seriesItem.formattedLabel}-series-color`}>
+                <div
+                  style={{
+                    width: 10,
+                    height: 10,
+                    borderRadius: 2,
+                    backgroundColor: seriesItem.color,
+                  }}
+                />
+              </td>
+              <td>
+                <Typography fontWeight="light">
+                  {seriesItem.formattedLabel}
+                </Typography>
+              </td>
+              <td>
+                <Typography>{seriesItem.formattedValue}</Typography>
               </td>
             </tr>
-          </thead>
-          <tbody>
-            {tooltipData.seriesItems.map((seriesItem) => (
-              <tr key={seriesItem.seriesId}>
-                <td aria-label={`${seriesItem.formattedLabel}-series-color`}>
-                  <div
-                    style={{
-                      width: 10,
-                      height: 10,
-                      borderRadius: 2,
-                      backgroundColor: seriesItem.color,
-                    }}
-                  />
-                </td>
-                <td>
-                  <Typography fontWeight="light">
-                    {seriesItem.formattedLabel}
-                  </Typography>
-                </td>
-                <td>
-                  <Typography>{seriesItem.formattedValue}</Typography>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </Paper>
-    </ChartsTooltipContainer>
+          ))}
+        </tbody>
+      </table>
+    </Paper>
   );
 }
diff --git a/docs/data/charts/tooltip/CustomAxisTooltip.tsx b/docs/data/charts/tooltip/CustomAxisTooltip.tsx
index 0d0693111c49c..9689757aa66a9 100644
--- a/docs/data/charts/tooltip/CustomAxisTooltip.tsx
+++ b/docs/data/charts/tooltip/CustomAxisTooltip.tsx
@@ -1,82 +1,79 @@
 import * as React from 'react';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
-import { ChartsTooltipContainer, useAxisTooltip } from '@mui/x-charts/ChartsTooltip';
+import { useAxisTooltip } from '@mui/x-charts/ChartsTooltip';
 
 export function CustomAxisTooltip() {
   const tooltipData = useAxisTooltip();
 
-  if (!tooltipData) {
-    // No data to display
+  if (tooltipData === null) {
     return null;
   }
   return (
-    <ChartsTooltipContainer trigger="axis">
-      <Paper
-        elevation={0}
-        sx={{
-          m: 1,
-          border: 'solid',
-          borderWidth: 2,
-          borderColor: 'divider',
-          table: { borderSpacing: 0 },
-          thead: {
-            td: {
-              px: 1.5,
-              py: 0.75,
-              borderBottom: 'solid',
-              borderWidth: 2,
-              borderColor: 'divider',
-            },
+    <Paper
+      elevation={0}
+      sx={{
+        m: 1,
+        border: 'solid',
+        borderWidth: 2,
+        borderColor: 'divider',
+        table: { borderSpacing: 0 },
+        thead: {
+          td: {
+            px: 1.5,
+            py: 0.75,
+            borderBottom: 'solid',
+            borderWidth: 2,
+            borderColor: 'divider',
           },
-          tbody: {
-            'tr:first-child': { td: { paddingTop: 1.5 } },
-            'tr:last-child': { td: { paddingBottom: 1.5 } },
-            tr: {
-              'td:first-child': { paddingLeft: 1.5 },
-              'td:last-child': { paddingRight: 1.5 },
-              td: {
-                paddingRight: '7px',
-                paddingBottom: '10px',
-              },
+        },
+        tbody: {
+          'tr:first-child': { td: { paddingTop: 1.5 } },
+          'tr:last-child': { td: { paddingBottom: 1.5 } },
+          tr: {
+            'td:first-child': { paddingLeft: 1.5 },
+            'td:last-child': { paddingRight: 1.5 },
+            td: {
+              paddingRight: '7px',
+              paddingBottom: '10px',
             },
           },
-        }}
-      >
-        <table>
-          <thead>
-            <tr>
-              <td colSpan={3}>
-                <Typography>{tooltipData.axisFormattedValue}</Typography>
+        },
+      }}
+    >
+      <table>
+        <thead>
+          <tr>
+            <td colSpan={3}>
+              <Typography>{tooltipData.axisFormattedValue}</Typography>
+            </td>
+          </tr>
+        </thead>
+        <tbody>
+          {tooltipData.seriesItems.map((seriesItem) => (
+            <tr key={seriesItem.seriesId}>
+              <td aria-label={`${seriesItem.formattedLabel}-series-color`}>
+                <div
+                  style={{
+                    width: 10,
+                    height: 10,
+                    borderRadius: 2,
+                    backgroundColor: seriesItem.color,
+                  }}
+                />
+              </td>
+              <td>
+                <Typography fontWeight="light">
+                  {seriesItem.formattedLabel}
+                </Typography>
+              </td>
+              <td>
+                <Typography>{seriesItem.formattedValue}</Typography>
               </td>
             </tr>
-          </thead>
-          <tbody>
-            {tooltipData.seriesItems.map((seriesItem) => (
-              <tr key={seriesItem.seriesId}>
-                <td aria-label={`${seriesItem.formattedLabel}-series-color`}>
-                  <div
-                    style={{
-                      width: 10,
-                      height: 10,
-                      borderRadius: 2,
-                      backgroundColor: seriesItem.color,
-                    }}
-                  />
-                </td>
-                <td>
-                  <Typography fontWeight="light">
-                    {seriesItem.formattedLabel}
-                  </Typography>
-                </td>
-                <td>
-                  <Typography>{seriesItem.formattedValue}</Typography>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </Paper>
-    </ChartsTooltipContainer>
+          ))}
+        </tbody>
+      </table>
+    </Paper>
   );
 }
diff --git a/docs/data/charts/tooltip/CustomAxisTooltipContent.js b/docs/data/charts/tooltip/CustomAxisTooltipContent.js
index db5e269c6bd9e..f2b5f5c4d649d 100644
--- a/docs/data/charts/tooltip/CustomAxisTooltipContent.js
+++ b/docs/data/charts/tooltip/CustomAxisTooltipContent.js
@@ -4,6 +4,7 @@ import { BarPlot } from '@mui/x-charts/BarChart';
 import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
 import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
 import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
+import { ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip';
 import { CustomAxisTooltip } from './CustomAxisTooltip';
 import { dataset, valueFormatter } from '../dataset/weather';
 
@@ -27,7 +28,9 @@ export default function CustomAxisTooltipContent() {
         </g>
         <ChartsXAxis />
         <ChartsYAxis />
-        <CustomAxisTooltip />
+        <ChartsTooltipContainer trigger="axis">
+          <CustomAxisTooltip />
+        </ChartsTooltipContainer>
       </ChartContainer>
     </div>
   );
diff --git a/docs/data/charts/tooltip/CustomAxisTooltipContent.tsx b/docs/data/charts/tooltip/CustomAxisTooltipContent.tsx
index 9a791ace90ea9..34e94004d86c5 100644
--- a/docs/data/charts/tooltip/CustomAxisTooltipContent.tsx
+++ b/docs/data/charts/tooltip/CustomAxisTooltipContent.tsx
@@ -4,6 +4,7 @@ import { BarPlot } from '@mui/x-charts/BarChart';
 import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
 import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
 import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
+import { ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip';
 import { CustomAxisTooltip } from './CustomAxisTooltip';
 import { dataset, valueFormatter } from '../dataset/weather';
 
@@ -28,7 +29,9 @@ export default function CustomAxisTooltipContent() {
         <ChartsXAxis />
         <ChartsYAxis />
 
-        <CustomAxisTooltip />
+        <ChartsTooltipContainer trigger="axis">
+          <CustomAxisTooltip />
+        </ChartsTooltipContainer>
       </ChartContainer>
     </div>
   );
diff --git a/docs/data/charts/tooltip/CustomItemTooltip.js b/docs/data/charts/tooltip/CustomItemTooltip.js
index 99ceb0dca0ffa..88833ca76d354 100644
--- a/docs/data/charts/tooltip/CustomItemTooltip.js
+++ b/docs/data/charts/tooltip/CustomItemTooltip.js
@@ -2,43 +2,38 @@ import * as React from 'react';
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
-import { ChartsTooltipContainer, useItemTooltip } from '@mui/x-charts/ChartsTooltip';
+import { useItemTooltip } from '@mui/x-charts/ChartsTooltip';
 
 export function CustomItemTooltip() {
   const tooltipData = useItemTooltip();
-
   if (!tooltipData) {
-    // No data to display
     return null;
   }
-
   return (
-    <ChartsTooltipContainer trigger="item">
-      <Paper
-        elevation={0}
-        sx={{
-          m: 1,
-          p: 1.5,
-          border: 'solid',
-          borderWidth: 2,
-          borderColor: 'divider',
-        }}
-      >
-        <Stack direction="row" alignItems="center">
-          <div
-            style={{
-              width: 11,
-              height: 11,
-              borderRadius: '50%',
-              backgroundColor: tooltipData.color,
-            }}
-          />
-          <Typography sx={{ ml: 2 }} fontWeight="light">
-            {tooltipData.label}
-          </Typography>
-          <Typography sx={{ ml: 2 }}>{tooltipData.formattedValue}</Typography>
-        </Stack>
-      </Paper>
-    </ChartsTooltipContainer>
+    <Paper
+      elevation={0}
+      sx={{
+        m: 1,
+        p: 1.5,
+        border: 'solid',
+        borderWidth: 2,
+        borderColor: 'divider',
+      }}
+    >
+      <Stack direction="row" alignItems="center">
+        <div
+          style={{
+            width: 11,
+            height: 11,
+            borderRadius: '50%',
+            backgroundColor: tooltipData.color,
+          }}
+        />
+        <Typography sx={{ ml: 2 }} fontWeight="light">
+          {tooltipData.label}
+        </Typography>
+        <Typography sx={{ ml: 2 }}>{tooltipData.formattedValue}</Typography>
+      </Stack>
+    </Paper>
   );
 }
diff --git a/docs/data/charts/tooltip/CustomItemTooltip.tsx b/docs/data/charts/tooltip/CustomItemTooltip.tsx
index 99ceb0dca0ffa..88833ca76d354 100644
--- a/docs/data/charts/tooltip/CustomItemTooltip.tsx
+++ b/docs/data/charts/tooltip/CustomItemTooltip.tsx
@@ -2,43 +2,38 @@ import * as React from 'react';
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
-import { ChartsTooltipContainer, useItemTooltip } from '@mui/x-charts/ChartsTooltip';
+import { useItemTooltip } from '@mui/x-charts/ChartsTooltip';
 
 export function CustomItemTooltip() {
   const tooltipData = useItemTooltip();
-
   if (!tooltipData) {
-    // No data to display
     return null;
   }
-
   return (
-    <ChartsTooltipContainer trigger="item">
-      <Paper
-        elevation={0}
-        sx={{
-          m: 1,
-          p: 1.5,
-          border: 'solid',
-          borderWidth: 2,
-          borderColor: 'divider',
-        }}
-      >
-        <Stack direction="row" alignItems="center">
-          <div
-            style={{
-              width: 11,
-              height: 11,
-              borderRadius: '50%',
-              backgroundColor: tooltipData.color,
-            }}
-          />
-          <Typography sx={{ ml: 2 }} fontWeight="light">
-            {tooltipData.label}
-          </Typography>
-          <Typography sx={{ ml: 2 }}>{tooltipData.formattedValue}</Typography>
-        </Stack>
-      </Paper>
-    </ChartsTooltipContainer>
+    <Paper
+      elevation={0}
+      sx={{
+        m: 1,
+        p: 1.5,
+        border: 'solid',
+        borderWidth: 2,
+        borderColor: 'divider',
+      }}
+    >
+      <Stack direction="row" alignItems="center">
+        <div
+          style={{
+            width: 11,
+            height: 11,
+            borderRadius: '50%',
+            backgroundColor: tooltipData.color,
+          }}
+        />
+        <Typography sx={{ ml: 2 }} fontWeight="light">
+          {tooltipData.label}
+        </Typography>
+        <Typography sx={{ ml: 2 }}>{tooltipData.formattedValue}</Typography>
+      </Stack>
+    </Paper>
   );
 }
diff --git a/docs/data/charts/tooltip/CustomTooltipContent.js b/docs/data/charts/tooltip/CustomTooltipContent.js
index 72d4b2d839d2d..70661ea5c4362 100644
--- a/docs/data/charts/tooltip/CustomTooltipContent.js
+++ b/docs/data/charts/tooltip/CustomTooltipContent.js
@@ -4,6 +4,7 @@ import { BarPlot } from '@mui/x-charts/BarChart';
 import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
 import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
 import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
+import { ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip';
 import { CustomItemTooltip } from './CustomItemTooltip';
 import { dataset, valueFormatter } from '../dataset/weather';
 
@@ -27,7 +28,9 @@ export default function CustomTooltipContent() {
         </g>
         <ChartsXAxis />
         <ChartsYAxis />
-        <CustomItemTooltip />
+        <ChartsTooltipContainer trigger="item">
+          <CustomItemTooltip />
+        </ChartsTooltipContainer>
       </ChartContainer>
     </div>
   );
diff --git a/docs/data/charts/tooltip/CustomTooltipContent.tsx b/docs/data/charts/tooltip/CustomTooltipContent.tsx
index a40570a7d032e..70661ea5c4362 100644
--- a/docs/data/charts/tooltip/CustomTooltipContent.tsx
+++ b/docs/data/charts/tooltip/CustomTooltipContent.tsx
@@ -4,6 +4,7 @@ import { BarPlot } from '@mui/x-charts/BarChart';
 import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
 import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
 import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
+import { ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip';
 import { CustomItemTooltip } from './CustomItemTooltip';
 import { dataset, valueFormatter } from '../dataset/weather';
 
@@ -27,8 +28,9 @@ export default function CustomTooltipContent() {
         </g>
         <ChartsXAxis />
         <ChartsYAxis />
-
-        <CustomItemTooltip />
+        <ChartsTooltipContainer trigger="item">
+          <CustomItemTooltip />
+        </ChartsTooltipContainer>
       </ChartContainer>
     </div>
   );
diff --git a/docs/data/charts/tooltip/tooltip.md b/docs/data/charts/tooltip/tooltip.md
index d13b996cca3fd..9433e90b68f69 100644
--- a/docs/data/charts/tooltip/tooltip.md
+++ b/docs/data/charts/tooltip/tooltip.md
@@ -105,18 +105,14 @@ Examples about helpers are provided in the composition section.
 ```jsx
 import { ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip';
 
-function CustomItemTooltip() {
+function CustomItemTooltipContent() {
   const tooltipData = useItemTooltip();
 
   if (!tooltipData) { // No data to display
     return null;
   }
 
-  return (
-    <ChartsTooltipContainer trigger="item">
-      {/** Your custom content **/}
-    </ChartsTooltipContainer>
-  )
+  return <div>{/** Your custom content **/}</div>;
 }
 
 <LineChart
@@ -126,10 +122,31 @@ function CustomItemTooltip() {
 // With composition
 <ChartContainer>
   // ...
-  <CustomItemTooltip />
+  <ChartsTooltipContainer trigger="item">
+    <CustomItemTooltipContent />
+  </ChartsTooltipContainer>
 </ChartContainer>
 ```
 
+:::warning
+Do not skip ChartsTooltipContainer rendering if the tooltip has no data to display.
+For example the following code does not work.
+
+```jsx
+if (tooltipData === null) {
+  return null;
+}
+
+return (
+  <ChartsTooltipContainer trigger="item">
+    {/** My content **/}
+  </ChartsTooltipContainer>
+);
+```
+
+The ChartsTooltipContainer must render before the pointer enters the SVG because it uses this event to get the pointer type.
+:::
+
 ### Overriding placement
 
 To override tooltip placement, override to the tooltip with `slots.tooltip`.