mui
[WIP][charts] Controll the item tooltip
Deploy preview: https://deploy-preview-20617--material-ui-x.netlify.app/
Updated pages:
Bundle size report
| Bundle | Parsed size | Gzip size |
|---|---|---|
| @mui/x-data-grid | 0B(0.00%) | 0B(0.00%) |
| @mui/x-data-grid-pro | 0B(0.00%) | 0B(0.00%) |
| @mui/x-data-grid-premium | 0B(0.00%) | 0B(0.00%) |
| @mui/x-charts | 🔺+619B(+0.18%) | 🔺+149B(+0.14%) |
| @mui/x-charts-pro | 🔺+617B(+0.14%) | 🔺+157B(+0.12%) |
| @mui/x-charts-premium | 🔺+619B(+0.14%) | 🔺+140B(+0.10%) |
| @mui/x-date-pickers | 0B(0.00%) | 0B(0.00%) |
| @mui/x-date-pickers-pro | 0B(0.00%) | 0B(0.00%) |
| @mui/x-tree-view | 0B(0.00%) | 0B(0.00%) |
| @mui/x-tree-view-pro | 0B(0.00%) | 0B(0.00%) |
Generated by :no_entry_sign: dangerJS against 06453a45dbf2802a3a4e43f2c9abe63b4fdc7ee5
CodSpeed Performance Report
Merging #20617 will not alter performance
Comparing alexfauquette:controll-tooltip-item (06453a4) with master (139a02a)[^unexpected-base]
[^unexpected-base]: No successful run was found on master (262e368) during the generation of this report, so 139a02a was used instead as the comparison base. There might be some changes unrelated to this pull request in this report.
Summary
✅ 13 untouched
![codspeed-hq[bot] avatar](https://avatars.githubusercontent.com/in/257293?v=4 "Published by a pub.dev verified publisher"){kind=small}
The tooltip doesn't seem to anchor to its item on scroll:
https://github.com/user-attachments/assets/dc85b1ec-1a46-4198-9fb7-22aaabe62106
The tooltip doesn't seem to anchor to its item on scroll:
I propose an hybrid approach between a <rect /> used as an anchor and the a fake anchor element
- When tracking pointer position: event already return screen coordinate. Then I use a fake
getBoundingClientRectto avoid mapping screen coordinate to SVG corrdinate - When tracking nodes, I add a
rectat correct position and use it as an anchor
https://github.com/mui/mui-x/pull/20617/commits/06453a45dbf2802a3a4e43f2c9abe63b4fdc7ee5
@bernardobelchior If you want I can extract this commit in a dedicated PR. It's just that with controlled tooltip it's much easier to reproduce the issue due to scrolling
I propose an hybrid approach between a
<rect />used as an anchor and the a fake anchor element
- When tracking pointer position: event already return screen coordinate. Then I use a fake
getBoundingClientRectto avoid mapping screen coordinate to SVG corrdinate- When tracking nodes, I add a
rectat correct position and use it as an anchor
Yeah, I think that's a good solution 👍
@bernardobelchior If you want I can extract this commit in a dedicated PR. It's just that with controlled tooltip it's much easier to reproduce the issue due to scrolling
Maybe it wouldn't be a bad idea because I'm seeing some weird behavior and maybe it's easier to iterate on a smaller PR:
Not sure why, but this doesn't seem to be properly positioned in mobile:
https://github.com/user-attachments/assets/a3555150-c41f-4a0d-915b-c07f7bb74b59
Also, the synchronized demo doesn't work very well in mobile because the tooltip item disappears on touch end. I wonder if we should try to keep showing it after touch end to ensure touch users can see it:
https://github.com/user-attachments/assets/1553fe27-3551-43c0-bd2b-3b6012512947
Not sure why, but this doesn't seem to be properly positioned in mobile:
That' because we add extra space on mobile to avoid having the tooltip hidden under the user thumb
Also, the synchronized demo doesn't work very well in mobile because the tooltip item disappears on touch end. I wonder if we should try to keep showing it after touch end to ensure touch users can see it:
I don't see how to do that. When user don't touch the chart it should disapear. We could add extra parameter or demos to either add a pending time where the tooltip is still visible, or a tooltip that wait for a click outside to close.
That' because we add extra space on mobile to avoid having the tooltip hidden under the user thumb
Makes sense 👍
I don't see how to do that. When user don't touch the chart it should disapear. We could add extra parameter or demos to either add a pending time where the tooltip is still visible, or a tooltip that wait for a click outside to close.
Yeah, I thought we could do something with the demo just so it's visible; but then it would be weird because it wouldn't show the correct behavior