[charts][ChartsTooltip] Add support mobile tooltip

[wzdorowa]

Resolves: https://github.com/mui/mui-x/issues/13041

Added tracking of touch events for correct operation on mobile devices. This works in case of an axis trigger.

This solution does not work for an item trigger. It is necessary to come up with a solution for this case.

Preview: https://deploy-preview-13043--material-ui-x.netlify.app/x/react-charts/tooltip/

• [x] I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Deploy preview: https://deploy-preview-13043--material-ui-x.netlify.app/

Generated by :no_entry_sign: dangerJS against ca26170a9fa158ad9b7e675f13282d5d2abff70b

[JCQuintas]

That's kinda cool, thanks for your contribution. :D

Do you have any insights on why item is not working? Did you try to make it work?

[wzdorowa]

item doesn’t work because we don’t have an equivalent of mouseenter/leave events for touch.

The workarounds found don’t look very good and can lead to performance issues. So I didn’t add them. Failed to add handlers to this file: https://github.com/mui/mui-x/blob/master/packages/x-charts/src/hooks/useInteractionItemProps.ts

[JCQuintas]

@alexfauquette current issue with mouse events in item tooltip is that we trigger the event for every item, which prevents allowing the touch event to move freely and updating the tooltip based on which element is currently on focus. We can probably move the useInteractionItemProps to be more similar to the useAxisEvent instead if we want this behaviour to be present in the item tooltip as well.

[alexfauquette]

We can probably move the useInteractionItemProps to be more similar to the useAxisEvent

I'm not sure to understand what you're proposing.

The useAxisEvent is a hook use at the level of the SVG because with axis scale we can easily go from mouse position to value and the opposite.

But for items, we don't have a simple way to map (x, y) to the item. That's why we rely on the SVG elements to catch the enter/leave/click

You are proposing to put a onMouseMove/onTouchMove and rely on the event.target to catch which element is getting the highlight? a solution with something like <path data-series-id="..." data-item-id="..." ... /> to transmit the information up to the root?

By the way, items are already visible if you click on them

I assume we can add this fix which is already an improvement, and fix the item aspect in another one

[JCQuintas]

<path data-series-id="..." data-item-id="..." ... />

yes, I was thinking something like that.

I'm aware the items are visible on click, but this MR is about making "dragging" your finger around work seamlessly, without having to click again.

I assume we can add this fix which is already an improvement, and fix the item aspect in another one

Agree