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.

Answer 2

There is no jqGrid API for this. If you want to change the tooltip text you will have to write code to manually change the value of the cell's title element.

Answer 3

I had a similar problem, where jQuery just WOULD NOT recognize a mouseover even though the class was set correctly. As a test I setup

$('.note).mouseover(function(){alert('hello')})

No results. Then I changed it to

$('.note').live('mouseover',function(){alert('hello')})

and it worked. It was all about loading order. Hope this helps.

Answer 4

To highlight and assign a tooltip to an entire row, using jqgrid 4.4 and IE 11, this works.

1. turn off tooltip in all cells when defining the colModel, for example:

   colModel: [ { name: 'ColumnName', title: false },...

2. assign a loadComplete method to the grid:

   loadComplete: function () {
   var rows = $(this).getDataIDs();
   
   for (var i = 0; i < rows.length; i++) {
       var row = $(this).getRowData(rows[i]);
       if (row.IsSomething == 'true') {
           this.rows[i + 1].className = this.rows[i + 1].className + ' ui-state-highlight';
           $(this.rows[i + 1]).attr('title', 'This tooltip will appear for the entire row');
       }
   }
   

   } }

Answer 5

Use a custom formatter

        function myCellFormatter(cellvalue, options, rowObject) {           
                return '<span title="' + rowObject.name + rowObject.category +rowObject.subcategory +'">'+ cellvalue +'</span>';

        }

And then use this formatter in the col model

{index: 'name', name: 'name',formatter:myCellFormatter, label: 'Name'},
...

Answer 6

I would like to extend my answer for using bootstrap tooltip with jqGrid. Grid sets a tooltip by default which could be cleared using title:false for each column.

To select a particular td or cell we could create our own class/attribute using cellattr property as a function for any cell. For example:

cellattr: function(rowID,val,rawObject,cm,rdata) {
    return "class='tooltip-cell';" // could return 'n' number of attributes
}

Then finally, bootstrap function tooltip could be called on a single or a collection of cells/td:

$('#myGrid .tooltip-cell').tooltip({
            container:'body',
            placement: 'bottom',
            title: 'Click to edit',
            trigger: 'hover'
        });

container:body needs to be used to maintain the behavior of html tables.