Hi All,

I’m adding a custom tooltip via JS for the data grid. The JS is placed in the script folder and called on the grid’s Initialize event.

var grid;
var tooltip = new wijmo.Tooltip();
tooltip.showAtMouse = true; 

function tooltipContentManage(e, grid) {
    var ht = grid.provider.hitTest(e);
    if (grid.provider.rows[ht.row] && grid.provider.columns[ht.col]) {
        var cell = grid.provider.cells.getCellElement(ht.row, ht.col);
        var rowData = grid.provider.rows[ht.row]._data;
        var tooltipText = "<div class='card'>Employee Name: " + rowData.EmployeeName ; tooltipText += "</br> DOB: " + rowData.DOB; + "</div>";
        if (tooltipText !== "") {
            tooltip.setTooltip(cell, tooltipText);
        }
    }
} 

function mouseOverHandler(e, grid) {
    tooltipContentManage(e, grid);
} 

function mouseLeaveHandler(e) {
    tooltip.hide();
} 

function initiateTooltipListner(gridId) {
    grid = GridAPI.GridManager.GetGridById(gridId);
    grid.provider.hostElement.addEventListener('mouseover', (e) => mouseOverHandler(e, grid));
    grid.provider.hostElement.addEventListener('mouseleave', (e) => mouseLeaveHandler(e));
} 

Problem:

• On initial load, the tooltip works fine for the rows that are visible in the browser.
• If I scroll down to see rows that were not initially visible, the tooltip does not appear when I hover over those cells.
• If I click on a cell or visible element in the grid after scrolling, the tooltip starts working.

It seems like the tooltip only attaches to rendered cells and doesn’t dynamically handle virtualized rows that appear after scrolling.  I tried changing it to mousemove event as well but still no luck

Regards,

Sudharshan