Tooltips on table visualisation headers when truncated

[jgough]

On table visualisations with many columns or long column names the names can become truncated. I expected to be able to hover the mouse to see the actual column name if truncated but this does not happen.

To reproduce, create a table with lots of columns, or long column names. Here's a pre-made playground link&_a=(filters:!(),linked:!f,query:(language:kuery,query:''),uiState:(),vis:(aggs:!((enabled:!t,id:'1',params:(customLabel:'Metric%20Number%201'),schema:metric,type:count),(enabled:!t,id:'2',params:(customLabel:'Metric%20Number%202'),schema:metric,type:count),(enabled:!t,id:'3',params:(customLabel:'Metric%20Number%203'),schema:metric,type:count),(enabled:!t,id:'4',params:(customLabel:'Metric%20Number%204'),schema:metric,type:count),(enabled:!t,id:'5',params:(customLabel:'Metric%20Number%205'),schema:metric,type:count),(enabled:!t,id:'6',params:(field:Dest,missingBucket:!f,missingBucketLabel:Missing,order:desc,orderBy:'1',otherBucket:!f,otherBucketLabel:Other,size:5),schema:bucket,type:terms)),params:(perPage:10,percentageCol:'',showMetricsAtAllLevels:!f,showPartialRows:!f,showTotal:!f,totalFunc:sum),title:'',type:table))) as an example. Resize the window smaller until the metric names are truncated like so:

It is not possible to easily see which column is which - especially confusing when there are many many similarly-named columns.

I'd love be able to hover the mouse to display the full column names.

[joshuarrrr]

Thanks @jgough, this is definitely annoying. We may need to fix this in the underlying OUI component, as I would expect a tooltip to automatically appear in the case of truncation.

P.S. - Thanks for the playground link - it makes reproduction so easy!

[joshuarrrr]

@KrooshalUX Is this default column header truncation behavior for DataGrid correct? Or should we wrap long column headers?

[KrooshalUX]

Great call outs @jgough & @joshuarrrr - I think I would prefer, for the short term, to provide the tooltip on mouseover vs wrapping. Since there are variations of the look & feel for Data Grid - and - builders can set some rows to not be resizeable, we would need to engage in some more exploration for table header wrapping - especially now that it used to power visualizations that, on a dashboard, could end up somewhat small depending on how the user lays out the visualization on their dashboard, and I think we can make more meaningful progress using the tooltip. The tooltip also feels like the right thing to do for accessibility?

Lets do some exploration @joshuarrrr to see if there is any interference with the click action (right now I see that the entire header is clickable to get the pop-over to show for the sort actions).

[wbeckler]

I'm adding the "Bug" label as this makes some tables unusable and there is a strong expectation that hovering would reveal the needed information.

[joshuarrrr]

PR of fix is here: https://github.com/opensearch-project/oui/pull/1133