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:

  1. Is there any native/supported way to react to hover on a DataGrid cell or row?
  2. Is there any native way to show a tooltip for one specific column?
  3. Has anyone successfully used a DOM hack like querySelector(...).addEventListener(...) for this in Freedom UI?
  4. If hover is not supported, what would be the best native workaround?

If anyone has an example, that would help a lot.

Thanks

Like 16

Like

0 comments
Show all comments