How to set the tool tip on jqGrid mouse over?

Question

How can you set the "tool tip" that appears when you hover your mouse over a jqGrid row/cell?

Currently the tool tip appears to just be the cell contents.

Answer 1

In general I agree with Justin, that jqGrid get you no direct way to set tooltip on the row, you can do this only on the cell basis. So you have to do this manually.

First of all you should set title:false property on all cells to have no tooltip for the cells. Then you have to set your custom tooltips of every row. You can do this for example inside of loadComplete event handle. The corresponding code can be about following:

loadComplete: function() {
    var ids = grid.jqGrid('getDataIDs');
    for (var i=0;i<ids.length;i++) {
        var id=ids[i];
        var rowData = grid.jqGrid('getRowData',id);
        $('#'+id,grid[0]).attr('title', rowData.Name + ' (' +
                                        rowData.Category + ', ' +
                                        rowData.Subcategory + ')');
    }
}

You can see the corresponding example you can see live here.

UPDATED: In more late versions of jqGrid there are much more effective way to set custom title. It's the usage of cellattr (see the answer for an example) or the usage of rowattr (see the answer). I recommend to use gridview: true option of jqGrid always. The usage of cellattr or rowattr together with gridview: true allows to create full grid body inclusive of all tooltips which one need in one modification of the page (the full HTML fragment of grid body inclusive of all tooltips will be assigned to innerHTML property). The usage of .attr in the loop follows at least to reflow which is expansive (see here). So the usage of cellattr and rowattr in combination with gridview: true allow to achieve the best performance.