[charts] Allow skipping tooltip render

Author: alexfauquette

docs/data/charts/tooltip/tooltip.md

@@ -134,7 +134,7 @@ You can replace the default tooltip in single component charts by using slots.
 <LineChart slots={{ tooltip: CustomItemTooltip }} />
 ```
 
-With compositon, you can use your component inside the container.
+With composition, you can use your component inside the container.
 
 ```jsx
 <ChartContainer>
@@ -201,25 +201,6 @@ The following demo shows how to use additional hooks such as `useXAxis()` and `u
 To keep the default placement, use the `<ChartsTooltipContainer />` wrapper.
 It accepts a prop `trigger = 'item' | 'axis'` that defines when the Popper should open.
 
-:::warning
-The tooltip might not open if the ChartsTooltipContainer isn't rendered.
-
-For example the following code does not work.
-
-```jsx
-if (tooltipData === null) {
-  return null;
-}
-
-return (
-  <ChartsTooltipContainer trigger="item">
-    {/** My content **/}
-  </ChartsTooltipContainer>
-);
-```
-
-:::
-
 ##### Item content
 
 The `useItemTooltip()` hook provides the information about the current item the user is interacting with.

packages/x-charts/src/ChartsTooltip/ChartsTooltipContainer.tsx

@@ -7,7 +7,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import Popper, { PopperProps } from '@mui/material/Popper';
 import NoSsr from '@mui/material/NoSsr';
 import { useSvgRef } from '../hooks/useSvgRef';
-import { TriggerOptions, usePointerType } from './utils';
+import { TriggerOptions, useIsDesktop } from './utils';
 import { ChartsTooltipClasses } from './chartsTooltipClasses';
 import { useSelector } from '../internals/store/useSelector';
 import { useStore } from '../internals/store/useStore';
@@ -62,7 +62,7 @@ function ChartsTooltipContainer(inProps: ChartsTooltipContainerProps) {
   const { trigger = 'axis', classes, children, ...other } = props;
 
   const svgRef = useSvgRef();
-  const pointerType = usePointerType();
+  const isDesktop = useIsDesktop();
 
   const popperRef: PopperProps['popperRef'] = React.useRef(null);
   const positionRef = useLazyRef(() => ({ x: 0, y: 0 }));
@@ -79,8 +79,6 @@ function ChartsTooltipContainer(inProps: ChartsTooltipContainerProps) {
       : selectorChartsInteractionItemIsDefined,
   );
 
-  const popperOpen = pointerType !== null && isOpen; // tooltipHasData;
-
   React.useEffect(() => {
     const element = svgRef.current;
     if (element === null) {
@@ -123,15 +121,15 @@ function ChartsTooltipContainer(inProps: ChartsTooltipContainerProps) {
         name: 'offset',
         options: {
           offset: () => {
-            if (pointerType?.pointerType !== 'touch') {
+            if (isDesktop) {
               // The popper offset: [skidding, distance]
               return [0, 8];
             }
             return [0, 64];
           },
         },
       },
-      ...(pointerType?.pointerType === 'mouse'
+      ...(isDesktop
         ? [] // Keep default behavior
         : [
             {
@@ -142,7 +140,7 @@ function ChartsTooltipContainer(inProps: ChartsTooltipContainerProps) {
             },
           ]),
     ],
-    [pointerType],
+    [isDesktop],
   );
 
   if (trigger === 'none') {
@@ -151,11 +149,11 @@ function ChartsTooltipContainer(inProps: ChartsTooltipContainerProps) {
 
   return (
     <NoSsr>
-      {popperOpen && (
+      {isOpen && (
         <ChartsTooltipRoot
           className={classes?.root}
-          open={popperOpen}
-          placement={pointerType?.pointerType === 'mouse' ? 'right-start' : 'top'}
+          open={isOpen}
+          placement={isDesktop ? 'right-start' : 'top'}
           popperRef={popperRef}
           anchorEl={anchorEl}
           modifiers={modifiers}

packages/x-charts/src/ChartsTooltip/utils.tsx

@@ -1,5 +1,6 @@
 'use client';
 import * as React from 'react';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { useSvgRef } from '../hooks';
 
 type MousePosition = {
@@ -9,6 +10,9 @@ type MousePosition = {
   height: number;
 };
 
+// Taken from @mui/x-date-time-pickers
+const desktopModeMediaQuery = '@media (pointer: fine)';
+
 export type UseMouseTrackerReturnValue = null | MousePosition;
 
 /**
@@ -57,42 +61,10 @@ export function useMouseTracker(): UseMouseTrackerReturnValue {
   return mousePosition;
 }
 
-type PointerType = Pick<MousePosition, 'pointerType'>;
-
-export function usePointerType(): null | PointerType {
-  const svgRef = useSvgRef();
-
-  // Use a ref to avoid rerendering on every mousemove event.
-  const [pointerType, setPointerType] = React.useState<null | PointerType>(null);
-
-  React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null) {
-      return () => {};
-    }
-
-    const handleOut = (event: PointerEvent) => {
-      if (event.pointerType !== 'mouse') {
-        setPointerType(null);
-      }
-    };
-
-    const handleEnter = (event: PointerEvent) => {
-      setPointerType({
-        pointerType: event.pointerType as PointerType['pointerType'],
-      });
-    };
-
-    element.addEventListener('pointerenter', handleEnter);
-    element.addEventListener('pointerup', handleOut);
-
-    return () => {
-      element.removeEventListener('pointerenter', handleEnter);
-      element.removeEventListener('pointerup', handleOut);
-    };
-  }, [svgRef]);
+export function useIsDesktop(): boolean {
+  const isDesktop = useMediaQuery(desktopModeMediaQuery, { defaultMatches: true });
 
-  return pointerType;
+  return isDesktop;
 }
 
 export type TriggerOptions = 'item' | 'axis' | 'none';