Tooltip cut-off issue

0
I am using tooltip widget inside datagrid 2. Tootlip is shwoing incomplete, cut-off issue is there. How to fix this issue?Please refer screenshots attached.
asked
3 answers
0

The issue happens because Data Grid 2 or one of its parent containers may have Overflow : hidden or Overflow: auto

When the Tooltip opens outside the grid cell, the parent container clips the tooltip, so only part of it is visible.

I hope this works, if not solved can you please attach the screenshots. So that i can understand more clear.

answered
0

Hi,

Could you please attach a clear screenshot showing the complete Tooltip widget and the DataGrid 2 area where the tooltip is getting cut off?


The current screenshot doesn't not vissible.


Once you share a proper screenshot, I can take a look and suggest the appropriate fix.

answered
0
Hi Sidheswari,
This looks like an overflow/clipping issue caused by the Data Grid 2 cell rather than the tooltip text itself.
If the Tooltip widget is placed inside a Data Grid 2 custom-content column, the cell/container can clip the tooltip when the tooltip extends outside the cell boundaries.
I would first try giving the Tooltip trigger its own class and avoid applying overflow: hidden directly to the tooltip trigger.
For example:

.tooltipdatagrid2
    > .mx-dataview-content
    > .widget-tooltip
    > .widget-tooltip-trigger {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

Then configure the Tooltip widget's Position (Top/Bottom/Left/Right) so that it has enough space to render outside the cell.
One important point: I would not start by setting overflow: visible globally on .widget-datagrid-grid or the whole Data Grid. That can interfere with the grid's own scrolling and virtualization.
Also, if your requirement is simply to show the full value of a Data Grid 2 cell, you may not need a separate Tooltip widget at all. Data Grid 2 has a built-in Tooltip property for a column, which is specifically intended to show advisory information when the user hovers over the cell content.
If you are using Custom Content, however, the built-in column Tooltip property is not available, so using the Tooltip widget is appropriate.
I would therefore check these two things first:
  1. Whether the Tooltip widget is inside a Custom Content column.
  2. Whether any parent of the tooltip trigger has overflow: hidden.
If you can share the Data Grid 2 column structure (especially the widgets inside Custom Content) and the Tooltip widget configuration, it should be possible to identify which container is doing the clipping.

Why I prefer this answer: Mendix's current DG2 documentation explicitly supports widgets inside Custom Content, and the Community has a concrete example where tooltip content inside DG2 required styling the tooltip trigger rather than changing the entire grid's overflow behavior.

One thing I wouldn't claim on the forum is that z-index: 9999 alone fixes it. If an ancestor creates an overflow/clipping context, increasing z-index doesn't remove that clipping. That's why I'd check the parent/container overflow first.

answered