[data grid] Can't remove Tooltip when text is not truncate in DataGridPremium

[Aberkati]

The problem in depth

I'm working on a DataPremium grid and I want to display truncate columns in a tooltip component, so when I resize a column and it's smaller than text size then the Tooltip component is displayed when I hover the colmn.

I have a demo but it's not working

What I want : display Tooltip only when the text is bigger than column size, and the column should be resizabe , so when the colum is bigger than the text there is no need to display Tooltip, hope it's clear, sorry for my english

Your environment

System:
OS: Windows 10 10.0.19045
Binaries:
Node: 18.18.1 - C:\Program Files\nodejs\node.EXE
npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: Chromium (120.0.2210.175)
npmPackages:
@emotion/react: ^11.10.6 => 11.11.1
@emotion/styled: ^11.10.6 => 11.11.0
@mui/base: 5.0.0-beta.7
@mui/core-downloads-tracker: 5.14.0
@mui/icons-material: ^5.11.16 => 5.14.0
@mui/material: ^5.12.1 => 5.14.0
@mui/private-theming: 5.13.7
@mui/styled-engine: 5.13.2
@mui/system: 5.14.0
@mui/types: 7.2.4
@mui/utils: 5.13.7
@mui/x-data-grid: 6.10.0
@mui/x-data-grid-premium: ^6.10.0 => 6.10.0
@mui/x-data-grid-pro: 6.10.0
@mui/x-license-pro: ^6.10.0 => 6.10.0
@types/react: 18.2.15
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0

Search keywords: DataGridPremium
Order ID: 66242

[michelengelen]

The demo you provided is not working because the Tooltip will always render, regardless of the overflow state of the cell content.

You have to come up with a way to determine if the content of the cell overflows and render the Tooltip visibility based on that.

For questions like these I would recommend asking the community over at StackOverflow or on our community discord server.

Since this is not a problem with the data grid itself I will close this issue for now.
Thanks for taking the time anyways! 🙇🏼

[github-actions]

👋 Thanks for using MUI X!

We use GitHub issues as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://mui.com/x/introduction/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[Aberkati]

I've already searched on Stackoverflow but I did not found the solution for my problem.
I think it's a DataGrid feature so that's why I contact you..
thank you

[michelengelen]

I've already searched on Stackoverflow but I did not found the solution for my problem. I think it's a DataGrid feature so that's why I contact you.. thank you

I do understand that this might be misleading ... especially the functionality you are trying to build is hard to do and a problem many devs have tried to solve before you.

you could try with a measuring approach:

renderCell: (params) => {
  const textRef = React.useRef(null);
  const [isTruncated, setIsTruncated] = React.useState(false);

  React.useEffect(() => {
    if (textRef.current && textRef.current.scrollWidth > textRef.current.clientWidth) {
      setIsTruncated(true);
    }
  }, [params.row.firstName]);

  return (
    <div ref={textRef}>
      {isTruncated ? (
        <Tooltip title={params.row.firstName} placement="bottom">
          <p>{params.row.firstName}</p>
        </Tooltip>
      ) : (
        <p>{params.row.firstName}</p>
      )}
    </div>
  );
},

This example is not working, just as a starting point to understand what has to be done to measure the size of an element.

And on another note: measuring is always hard and you have to take into account the lifecycle of react components as well. At the very least it will have a big impact on the performance of the grid.