[charts] Fix tooltip position (#17440)

Author: alexfauquette

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

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import useLazyRef from '@mui/utils/useLazyRef';
 import { styled, useThemeProps } from '@mui/material/styles';
-import Popper, { PopperPlacementType, PopperProps } from '@mui/material/Popper';
+import Popper, { PopperProps } from '@mui/material/Popper';
 import NoSsr from '@mui/material/NoSsr';
 import { useSvgRef } from '../hooks/useSvgRef';
 import { TriggerOptions, usePointerType } from './utils';
@@ -122,17 +122,24 @@ function ChartsTooltipContainer(inProps: ChartsTooltipContainerProps) {
       {
         name: 'offset',
         options: {
-          offset: ({ placement }: { placement: PopperPlacementType }) => {
+          offset: () => {
             if (pointerType?.pointerType !== 'touch') {
-              return [0, 0];
+              return [0, 8];
             }
-
-            const isBottom = placement.startsWith('bottom');
-            const placementOffset = isBottom ? 32 : 8;
-            return [0, pointerType.height + placementOffset];
+            return [0, 64];
           },
         },
       },
+      ...(pointerType?.pointerType === 'mouse'
+        ? [] // Keep default behavior
+        : [
+            {
+              name: 'flip',
+              options: {
+                fallbackPlacements: ['top-end', 'top-start', 'bottom-end', 'bottom'],
+              },
+            },
+          ]),
     ],
     [pointerType],
   );
@@ -147,9 +154,7 @@ function ChartsTooltipContainer(inProps: ChartsTooltipContainerProps) {
         <ChartsTooltipRoot
           className={classes?.root}
           open={popperOpen}
-          placement={
-            pointerType?.pointerType === 'mouse' ? ('right-start' as const) : ('top' as const)
-          }
+          placement={pointerType?.pointerType === 'mouse' ? 'right-start' : 'top'}
           popperRef={popperRef}
           anchorEl={anchorEl}
           modifiers={modifiers}

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

@@ -57,7 +57,7 @@ export function useMouseTracker(): UseMouseTrackerReturnValue {
   return mousePosition;
 }
 
-type PointerType = Pick<MousePosition, 'height' | 'pointerType'>;
+type PointerType = Pick<MousePosition, 'pointerType'>;
 
 export function usePointerType(): null | PointerType {
   const svgRef = useSvgRef();
@@ -79,7 +79,6 @@ export function usePointerType(): null | PointerType {
 
     const handleEnter = (event: PointerEvent) => {
       setPointerType({
-        height: event.height,
         pointerType: event.pointerType as PointerType['pointerType'],
       });
     };