[charts] Control the item tooltip by alexfauquette · Pull Request #20617 · mui/mui-x

alexfauquette · 2025-12-10T15:29:20Z

Fix #20187

Changelog

📊 The chart item tooltip can now be controlled

mui-bot · 2025-12-10T15:30:47Z

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

Updated pages:

docs/data/charts/tooltip/tooltip.md

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	🔺+430B^(+0.12%)	🔺+120B^(+0.11%)
@mui/x-charts-pro	🔺+431B^(+0.09%)	🔺+106B^(+0.08%)
@mui/x-charts-premium	🔺+430B^(+0.09%)	🔺+106B^(+0.08%)
@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%)

Details of bundle changes

Generated by 🚫 dangerJS against fa67534

codspeed-hq · 2025-12-11T11:04:20Z

Merging this PR will not alter performance

✅ 14 untouched benchmarks

_{Comparing alexfauquette:controll-tooltip-item (fa67534) with master (a7ff801)¹}

No successful run was found on master (24b9c2e) during the generation of this report, so a7ff801 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

bernardobelchior · 2025-12-16T10:26:00Z

The tooltip doesn't seem to anchor to its item on scroll:

Screen.Recording.2025-12-16.at.11.25.00.mov

docs/data/charts/tooltip/tooltip.md

alexfauquette · 2025-12-16T15:43:57Z

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 getBoundingClientRect to avoid mapping screen coordinate to SVG corrdinate
When tracking nodes, I add a rect at correct position and use it as an anchor

06453a4

@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

bernardobelchior · 2025-12-16T16:15:33Z

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

+    anchorRef.current = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    svgRef.current.appendChild(anchorRef.current);


Should we create this using a portal? I'm worried this will cause issues because we're never removing this rect.

Also, it seems we're creating this rect even if it isn't needed:

Screen.Recording.2025-12-16.at.17.20.44.mov

Why use a portal?

Because it follows React's rendering lifecycle. If this component is mounted, the rect is created as well; if this component is unmounted, the rect is removed.

bernardobelchior · 2025-12-16T16:22:19Z

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 getBoundingClientRect to avoid mapping screen coordinate to SVG corrdinate

When tracking nodes, I add a rect at 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:

Screen.Recording.2025-12-16.at.17.18.08.mov

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:

Screen.Recording.2025-12-16.at.17.18.49.mov

alexfauquette · 2025-12-16T16:59:08Z

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.

bernardobelchior · 2025-12-16T17:17:47Z

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

JCQuintas · 2025-12-16T17:26:08Z

docs/data/charts/tooltip/SyncTooltip.tsx

+            );
+          }}
+        />
+        <pre>Tooltip Item: {JSON.stringify(barTooltipItem, null, 2)}</pre>


Suggested change

<pre>Tooltip Item: {JSON.stringify(barTooltipItem, null, 2)}</pre>

Instead of removing it, I've set a minHeight

IMO irt's important to show the content of the controlled value to let user understand what happen

JCQuintas · 2025-12-16T17:26:15Z

docs/data/charts/tooltip/SyncTooltip.tsx

+            );
+          }}
+        />
+        <pre>Tooltip Item: {JSON.stringify(pieTooltipItem, null, 2)}</pre>


Suggested change

<pre>Tooltip Item: {JSON.stringify(pieTooltipItem, null, 2)}</pre>

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

github-actions · 2025-12-17T09:41:37Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

alexfauquette · 2025-12-31T10:10:59Z

I've reorganized the PR to get meaning-full commits

packages/x-charts/src/internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.ts

docs/data/charts/tooltip/SyncTooltip.tsx

docs/data/charts/tooltip/ControlledTooltip.tsx

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

bernardobelchior · 2026-01-06T15:47:46Z

I'm still seeing the tooltip being incorrectly positioned. I'm just long pressing a slice (without moving my finger):

ScreenRecording_01-06-2026.15-46-35_1.MP4

As soon as I move my finger the tooltip becomes correctly positioned

github-actions · 2026-01-08T17:08:56Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

…item

bernardobelchior

Code looks good 👍 minor comments

packages/x-charts/src/internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.ts

bernardobelchior · 2026-01-09T15:17:31Z

docs/data/charts/tooltip/tooltip.md


+## Controlling item tooltip
+
+You can control the item tooltip with `tooltipItem` and `onTooltipItemChange`.


We're using "item tooltip", but shouldn't it be "tooltip item" like the prop, or do you mean "item tooltip" as opposed to axis tooltip?

Yes, I mean item tooltip as opposed to axis tooltip

The issue with "tooltip item" is it could be interpreted as "the tooltip component" instead of "the tooltip associated to a given item"

JCQuintas · 2026-01-09T16:48:53Z

docs/data/charts/tooltip/tooltip.md

+When the item tooltip is controlled, the `anchor` is set to `'node'` if the pointer is outside of the chart.
+
+:::warning
+Make sure the tooltip `trigger` is set to `"item"`.


Shouldn't we just ignore trigger=axis if the tooltip is controlled? Or do we want to add a onTooltipAxisChange eventually?

onTooltipAxisChange is planned to come as a follow up

alexfauquette added type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. scope: charts Changes related to the charts. labels Dec 10, 2025

alexfauquette changed the title ~~[draft][charts] Controll the item tooltip~~ [WIP][charts] Controll the item tooltip Dec 10, 2025

alexfauquette changed the title ~~[WIP][charts] Controll the item tooltip~~ [charts] Control the item tooltip Dec 11, 2025

alexfauquette marked this pull request as ready for review December 11, 2025 13:19

alexfauquette requested review from a team and prakhargupta1 as code owners December 11, 2025 13:19

alexfauquette mentioned this pull request Dec 15, 2025

[charts] Add support for click-triggered and controlled tooltips in charts #20187

Closed

1 task

bernardobelchior reviewed Dec 16, 2025

View reviewed changes

docs/data/charts/tooltip/tooltip.md Show resolved Hide resolved

docs/data/charts/tooltip/tooltip.md Outdated Show resolved Hide resolved

bernardobelchior reviewed Dec 16, 2025

View reviewed changes

JCQuintas reviewed Dec 16, 2025

View reviewed changes

packages/x-charts/src/ChartsTooltip/ChartsTooltipContainer.tsx Show resolved Hide resolved

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Dec 17, 2025

alexfauquette mentioned this pull request Dec 30, 2025

[charts] Fix tooltip anchored to item #20783

Merged

alexfauquette added 5 commits December 31, 2025 10:58

docs

541f8b1

the feature

6741f3c

pass series type generic

a348c9e

proptypes

1a794ad

docs:api

3a0cad8

alexfauquette force-pushed the controll-tooltip-item branch from 06453a4 to 3a0cad8 Compare December 31, 2025 10:08

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Dec 31, 2025

alexfauquette requested review from JCQuintas and bernardobelchior December 31, 2025 10:13

JCQuintas approved these changes Dec 31, 2025

View reviewed changes

packages/x-charts/src/internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.ts Show resolved Hide resolved

bernardobelchior reviewed Jan 6, 2026

View reviewed changes

docs/data/charts/tooltip/SyncTooltip.tsx Show resolved Hide resolved

docs/data/charts/tooltip/ControlledTooltip.tsx Show resolved Hide resolved

alexfauquette added 2 commits January 6, 2026 14:15

simplify code

00e47d2

fix-ios

850f932

JCQuintas reviewed Jan 6, 2026

View reviewed changes

packages/x-charts/src/ChartsTooltip/ChartsTooltipContainer.tsx Show resolved Hide resolved

add extra attributes

6c40de1

alexfauquette mentioned this pull request Jan 8, 2026

[charts] Fix node anchor on iOS #20848

Merged

use react event

a49139c

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jan 8, 2026

alexfauquette added 2 commits January 9, 2026 10:08

Merge remote-tracking branch 'upstream/master' into controll-tooltip-…

f5daf0b

…item

Make it work

d1ce8b3

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jan 9, 2026

alexfauquette requested a review from bernardobelchior January 9, 2026 09:26

bernardobelchior approved these changes Jan 9, 2026

View reviewed changes

feedback

fa67534

JCQuintas approved these changes Jan 9, 2026

View reviewed changes

alexfauquette merged commit 610ba2d into mui:master Jan 9, 2026
22 checks passed

		anchorRef.current = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
		svgRef.current.appendChild(anchorRef.current);


		## Controlling item tooltip

		You can control the item tooltip with `tooltipItem` and `onTooltipItemChange`.

Uh oh!

Conversation

alexfauquette commented Dec 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

Uh oh!

mui-bot commented Dec 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

codspeed-hq bot commented Dec 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging this PR will not alter performance

Footnotes

Uh oh!

bernardobelchior commented Dec 16, 2025

Uh oh!

Uh oh!

Uh oh!

alexfauquette commented Dec 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bernardobelchior commented Dec 16, 2025

Uh oh!

alexfauquette commented Dec 16, 2025

Uh oh!

bernardobelchior commented Dec 16, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Dec 17, 2025

Uh oh!

alexfauquette commented Dec 31, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bernardobelchior commented Jan 6, 2026

Uh oh!

github-actions bot commented Jan 8, 2026

Uh oh!

bernardobelchior left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

alexfauquette commented Dec 10, 2025 •

edited

Loading

mui-bot commented Dec 10, 2025 •

edited

Loading

codspeed-hq bot commented Dec 11, 2025 •

edited

Loading

alexfauquette commented Dec 16, 2025 •

edited

Loading