Skip to content

[charts] Fix ChartsTooltip container and disablePortal props being ignored#22690

Merged
JCQuintas merged 5 commits into
mui:masterfrom
JCQuintas:fix/charts-tooltip-container
Jun 5, 2026
Merged

[charts] Fix ChartsTooltip container and disablePortal props being ignored#22690
JCQuintas merged 5 commits into
mui:masterfrom
JCQuintas:fix/charts-tooltip-container

Conversation

@JCQuintas

Copy link
Copy Markdown
Member

Closes #22687

Problem

ChartsTooltip's container and disablePortal props were ignored. In ChartsTooltipContainer, container={chartsLayerContainerRef.current} was hardcoded after the {...other} spread, so any user-provided container was always overwritten. With the default disablePortal={false}, the tooltip was forced to portal into the chart layer container, making container={document.body} (and similar) have no effect.

Fix

Respect a user-supplied container, falling back to the chart layer container only when none is provided:

-container={chartsLayerContainerRef.current}
+container={other.container ?? chartsLayerContainerRef.current}

disablePortal already flowed through {...other}; it only appeared ignored because the forced container won.

Tests

Added a browser test asserting the tooltip renders inside a user-provided container. Verified it fails before the fix and passes after.

Docs

Documented the container and disablePortal props in the Tooltip page ("Portaling the tooltip" section).

@JCQuintas
JCQuintas requested a review from alexfauquette as a code owner June 5, 2026 08:30
@JCQuintas JCQuintas self-assigned this Jun 5, 2026
@JCQuintas JCQuintas added scope: charts Changes related to the charts. type: bug It doesn't behave as expected. labels Jun 5, 2026
@code-infra-dashboard

code-infra-dashboard Bot commented Jun 5, 2026

Copy link
Copy Markdown

Deploy preview

Bundle size

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 🔺+13B(0.00%) 🔺+6B(+0.01%)
@mui/x-charts-pro 🔺+13B(0.00%) 🔺+6B(0.00%)
@mui/x-charts-premium 🔺+13B(0.00%) 🔺+7B(0.00%)
@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%)
@mui/x-license 0B(0.00%) 0B(0.00%)

Details of bundle changes

Performance

Total duration: 1,928.17 ms -268.09 ms(-12.2%) | Renders: 67 (+0) | Paint: 2,781.40 ms -366.69 ms(-11.6%)

Test Duration Renders
Heatmap: 100x100 grid 573.48 ms ▼-162.31 ms(-22.1%) 2 (+0)
LineChartPro with big data amount and zoomed in (with marks) 29.46 ms ▼-11.71 ms(-28.4%) 2 (+0)
HeatmapPremium: 100x100 grid (webgl renderer) 41.28 ms ▼-10.76 ms(-20.7%) 5 (+0)
RadarChart with many axes and multiple series 7.57 ms ▼-2.17 ms(-22.3%) 2 (+0)

22 tests within noise — details


Check out the code infra dashboard for more information about this PR.

@JCQuintas
JCQuintas force-pushed the fix/charts-tooltip-container branch from edb52d6 to ee17d72 Compare June 5, 2026 08:36
Comment thread docs/data/charts/tooltip/tooltip.md
Co-authored-by: Jose C Quintas Jr <[email protected]>
Signed-off-by: Jose C Quintas Jr <[email protected]>
@JCQuintas JCQuintas added needs cherry-pick The PR should be cherry-picked to master after merge. v8.x labels Jun 5, 2026

@alexfauquette alexfauquette left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another fix could be to move the ...other at the end of the component declaration. That way we can remove the other.container ?? and other.placement ??

Only the popper option need to stay after the {...other}

@JCQuintas
JCQuintas merged commit 8fb175e into mui:master Jun 5, 2026
25 checks passed
@JCQuintas
JCQuintas deleted the fix/charts-tooltip-container branch June 5, 2026 13:34
@github-actions

github-actions Bot commented Jun 5, 2026

Copy link
Copy Markdown
Contributor

Cherry-pick PRs will be created targeting branches: v8.x

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

needs cherry-pick The PR should be cherry-picked to master after merge. scope: charts Changes related to the charts. type: bug It doesn't behave as expected. v8.x

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[charts] ChartTooltip disablePortal and container props ignored

2 participants