Column and row highlight on hover disappears after table update

[Ben_HVC]

Thank you very much. This works great

[Ben_HVC]

I am back and Happy New Year to all

Is there any way to add tooltips to the sticky first column outside of the div? Reason being is to have a clear view of the tooltip regardless of the position of the table’s scroll bars. See the following. The tooltip is behind the column text, it flashes when I scroll to the bottom and depending on the size of the tooltip, it could be larger than the height of the table. Ideally, it would be good if I can display the tooltip in a fixed position outside of the div but not sure if this is possible in CSS

[PaulOB]

I think you will need js to make the tooltip appear outside the overflow:hidden div as it will need to be created outside of that table-grid div and then placed on top of the table in the right position.

If you didn’t want the left column sticky then you could have the tooltip show outside the table by removing position:relative from the table grid and removing the position:sticky from the left column th.

e.g.

.table-grid ,th{position:static!important}

That will allow the tooltip to show outside the overflow div.

If you must have the sticky first column then there’s no way to do it in CSS. You could make it easier to use by putting the tooltip on the bottom of the cell instead of the top but its swings and roundabouts

.table-grid tr:nth-child(-n+4) .mvtooltip_right {
  top:0;
  bottom:auto;
} 
.table-grid table tr .mvtooltip_right {
  top:auto;
  bottom:0;
} 
.table-grid  th:hover{z-index:3;}/* needed to show on top of the row below or above*/

[Ben_HVC]

Thanks Paul. Putting it to the bottom of the cell looks good. I will look into having this outside the div with JS as well