search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.07k stars 1.26k forks source link

[data grid] Tooltips are cut off below the last column of the table #14669

Open lukask-proxora opened 14 hours ago

lukask-proxora commented 14 hours ago

Steps to reproduce

Link to live example: codesandbox.io

Steps:

  1. add a tooltip in renderCell
  2. add disablePortal=true to the PopperProps (this is necessary for us because the tooltips contain links - further info below) (3. add whiteSpace: "wrap" to the surrounding element of the title property of the tooltip - otherwise the text of the tooltip does not wrap inside the tooltip)

Current behavior

The tooltip is cut off below the last column: Screenshot_2024-07-01_16-58-58

Expected behavior

The full tooltip is shown (this is possible if we remove disablePortal=true): Screenshot_2024-07-01_17-03-27

Context

Our tooltips may contain links and the user has to be able to navigate to these links with the keyboard (as one of the requirements for WCAG). Therefore, while the tooltip is focused, the containing link should get the focus by pressing the Tab key. This is currently only the case if we set disablePortal=true, but then we have this issue with the cut of tooltip.

So the solution proposed in https://github.com/mui/mui-x/issues/11708 does not work for us.

Your environment

Same behavior in Firefox and Chrome

Search keywords: tooltip data grid

michelengelen commented 14 hours ago

Hey @lukask-proxora ... could you make that codesandbox public? We cannot view it atm.

lukask-proxora commented 14 hours ago

Hi @michelengelen, Sorry, I just changed the Permission settings to public

michelengelen commented 12 hours ago

Ok, this makes sense. The reason this is not within the tab sequence is that the tooltip renders outside of the flow when portal is active. Is there another way of doing this @siriwatknp?