Freedom UI DataGrid: handle hover on a cell/row. Tooltip on masked column
Hi Community,
Iām trying to implement a small UX feature in a Freedom UI native DataGrid and wanted to check whether there is any supported/native way to do this.
I have a DataGrid column that contains a masked value. What I would like to achieve is:
- when the user hovers over that cell (preferred),
or at least:
- when the user hovers over the row,
I want to show the full value in a tooltip.
I went through the Freedom UI List/DataGrid documentation and page customization docs, but I could not find anything describing:
- a hover listener / mouseenter event for DataGrid cells or rows
- a native way to bind a tooltip on hover to a specific grid column
- a request/handler that is triggered by hovering a native DataGrid cell
So at the moment it looks like hover is not exposed as a native event in the standard DataGrid.
By inspecting the rendered DOM, I can see the table and cells generated by Angular/CDK/Material, for example something like:
document.querySelector('#cdk-drop-list-0')and column/cell selectors such as:
td[crt-data-table-column-id="f6"]So one idea I had was to try with plain JS / DOM event delegation, for example:
- attach a mouseover / mouseenter listener to the rendered table
- detect when the event target is inside the masked-number column
- inject a title attribute or custom tooltip dynamically
However, this feels quite fragile because this does not seem like an officially supported Freedom UI extension point.
My question is:
Has anyone implemented hover behavior in a native Freedom UI DataGrid without using a custom component?
More specifically:
- Is there any native/supported way to react to hover on a DataGrid cell or row?
- Is there any native way to show a tooltip for one specific column?
- Has anyone successfully used a DOM hack like
querySelector(...).addEventListener(...)for this in Freedom UI? - If hover is not supported, what would be the best native workaround?
If anyone has an example, that would help a lot.
Thanks
Like