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

[lukask-proxora]

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:

Expected behavior

The full tooltip is shown (this is possible if we remove disablePortal=true):

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 #11708 does not work for us.

Your environment

Same behavior in Firefox and Chrome

Search keywords: tooltip data grid

[michelengelen]

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

[lukask-proxora]

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

[michelengelen]

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?

[siriwatknp]

I think the Tooltip should work with keyboard to move the focus inside if there are focusable elements regardless of portal. Is this achievable/practical in terms of a11y? cc @michaldudak @mui/base-ui

[michaldudak]

Tooltips must not contain interactive elements. The Base UI Tooltip component doesn't support such a scenario. If interactive content is needed, a Popover that opens on hover can be used. The Base UI implementation manages focus regardless of portals being used.

[michelengelen]

Ok, as interactive elements are not supported this should be made into a Popover. Thanks @michaldudak and @siriwatknp! 👍🏼

[lukask-proxora]

Thanks for the clarification! We will use Popovers for our use case.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@lukask-proxora How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.