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

[Aberkati]

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

[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.