[DataGrid] Remove title prop from GridCell

[lauri865]

• I have followed (at least) the PR section of the contributing guide.

This PR removes the title prop from the GridCell component. It's only added to the components which don't really need it (string children – screen readers will focus on the content), and I find it just often gets in the way of using the Datagrid when I forget the cursor on a random cell. It serves no accessibility value, hence I propose removing it. Since it's also inconsistently applied, the users doesn't know to expect whether it's there or not.

On the marketing page alone: https://mui.com/x/

• Hover over numbers – nothing
• Hover over text – displays the same value as I can already, annoyingly, blocking the cell below

If the original purpose was to show value overflowing content value, it should a) show it only if there's overflow b) show it consistently, because right now it trains the user wait for nothing in many cases (and the delay of the native tooltip is very slow in any case).

FWIW, Ag-grid, Syncfusion, and other competing products don't do this.

[mui-bot]

Deploy preview: https://deploy-preview-15408--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 1673a20

[oliviertassinari]

Relate to #7671, #12045, #14482.

[lauri865]

Thanks for the additional context @oliviertassinari. Above all the UX concerns (which our users have complained about), just mixing a product that is conveying performance with native, slooow tooltips – not a good fit imho.

Just for reference, here's how we've solved it on our end (cursor position is slightly out of sync due to the screen recorder):

Overflow.tooltip.mp4

May not be an easy thing to offer out of the box, but having a title tag on all cells doesn't solve for the core issue either – there's far fewer overflown cells in a grid than not, generally speaking.

[romgrk]

I see how it makes sense to improve this, but by removing it aren't we preventing the information from being accessible at all in some cases?

Thoughts @mui/xgrid?

[arminmeh]

We don't have to have the title necessarily, but we do have to have something, otherwise you can't read the actual truncated values (effectively reverting #7671)

I have worked on #14484 which aligns the behavior with the column headers and shows the Tooltip component only for the truncated text, but that was put on hold because of #14484 (comment)

Example

I think that we can merge this discussion into #7323 and reactivate it to get to the desired approach

[lauri865]

Well, resizing columns is always an option, isn't it?

Whether the content needs to be readable in full or not is a bit use case specific and how to make it expand can also depend on the use case, and size of the content. Sometimes you may want it to expand on click (open a modal/detail panel, poppver, etc.), other times a tooltip.

Hence, not having a default strategy in place is maybe not be that bad imho. Definitely better than having a solution (i.e. the current implementation) that only works some of the time (=only without a custom 'renderCell').

But hey, I'm just one voice here. Will leave you to decide as you want, and feel free to close this PR if you disagree with the above.

[arminmeh]

I am also not a fan of the current solution, but I think it is a step backward to just remove the title since it has addressed a request from the past.

Well, resizing columns is always an option, isn't it?

Having this as the only option in the grid that has some kind of "Description" field would introduce a very bad UX

Hence, not having a default strategy in place is maybe not be that bad imho

I think that this is also a good option, but in that case we need at least a recommendation and an example how to do it to support the developers that do not want to spend time on this.

[lauri865]

Well, resizing columns is always an option, isn't it?

Having this as the only option in the grid that has some kind of "Description" field would introduce a very bad UX

I don't disagree with it being bad UX, but I do think the particular implementation is app-specific and should fall under the purview of app developers, not library authors. As a library author, it's dangerous to think too much about end-user UX, as you risk limiting the scope of the product. Mui's users are developers after all.

I'm all for recipes or plugins to provide solutions for particular use cases though (please no more props though 🙈😉).

[arminmeh]

@mui/xgrid
The current solution has flaws.
I am fine if we remove the title but give a higher priority implementing an alternative (recipe could also work)

a) show it only if there's overflow
b) show it consistently, because right now it trains the user wait for nothing in many cases

Note:
Once the title is removed, Safari will still work fine

[KenanYusuf]

As a library author, it's dangerous to think too much about end-user UX, as you risk limiting the scope of the product.

We are trying to offer a sensible UX for developers who want things to work out of the box, whilst enabling developers who need more flexibility the ability to extend the grid.

An opt-in tooltip when cell content is overflowing seems like a sensible default experience if we can do it reliably. The solution that @lauri865 demonstrates here #15408 (comment) would make a really nice recipe.

[oliviertassinari]

The solution that @lauri865 demonstrates here #15408 (comment) would make a really nice recipe.

https://mui.com/x/react-data-grid/recipes-editing/#multiline-editing isn't too far from it