View Full Version : automatic tooltips for grid cells with text overflow

19 May 2017, 7:33 AM

As I'm evaluating your new framework (great job!!!) I noticed that when a cell in the grid has more text than can fit it shows an ellipsis but hovering over a cell does not show a tooltip with the entire text. Are you planning on adding this feature to the grid? Doing it as part of the cell renderer looks like an overkill (inefficient), plus currently you render cell templates as a static HTML so React component cannot be used for that.

Do you have this in your pipeline/backlog? Any other idea how to implement it before it lands in the grid core itself.

Thank you,

20 May 2017, 5:55 AM
Good idea. We could create a dedicated grid tip singleton to do this job. I'll look into this on Monday.

In the meantime, check out http://docs.sencha.com/extreact/6.5.0/modern/Ext.tip.Manager.html

It relies on data- attribute which you can put into your DOM to show tooltips.

Edit: Just noticed that the tooltip attribute does default to using the app wide singleton, so you should be ok to configure your cells: http://docs.sencha.com/extreact/6.5.0/modern/Ext.Component.html#cfg-tooltip

20 May 2017, 10:35 PM
I've just been having a little play with this concept on Fiddle.

Here's a proof of concept I came up with: https://fiddle.sencha.com/?extreact#view/editor&fiddle/1vva


21 May 2017, 4:21 AM

21 May 2017, 4:35 PM
This is exactly what we need! Please incorporate it into the grid core.

Also, it would be nice to do the same for the column header cells!

21 May 2017, 9:24 PM
In my PR, I've gone a little further, and generalized that class into a clipped element tooltip.

By default, it will wake up whenever it is over any element in its target which has clipped its text.

Now that could be a little expensive, measuring the textContent of the element on every mouseover so you you can use the delegate attribute to filter it down using a DOM querySelector before measuring that content.

So, just sketching here, and assuming that "containment" of a ToolTip means that the tip uses that "owner" as its target, it's possible we end up with some construct like

<OverflowTip delegate=".x-gridcell,.x-gridcolumn"/>

22 May 2017, 6:48 AM
Yes, this looks very promising. Thank you for doing it over the weekend.

I would, however, suggest adding a couple of properties to the grid component itself a la:

<Grid showTipOnCellOverflow showTipOnHeaderOverflow>

for the basic scenarios. You probably do not want to expose some CSS as a property unless you need to do something very specific.