CODEWITHSUNDEEP
jqueryjqgridtooltip
Marcus Leon
Marcus Leon

Reputation: 56669

How to set the tool tip on jqGrid mouse over?

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.

Upvotes: 15

Views: 37980

Answers (6)

Tom Regan
Tom Regan

Reputation: 3841

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');
    }
}

    } }

Upvotes: 1

Suhail Gupta
Suhail Gupta

Reputation: 23216

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.

Upvotes: 0

Supra
Supra

Reputation: 1652

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'},
...

Upvotes: 0

Oleg
Oleg

Reputation: 221997

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.

Upvotes: 23

EWPDesign
EWPDesign

Reputation: 91

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.

Upvotes: 2

Justin Ethier
Justin Ethier

Reputation: 134167

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.

Upvotes: 2

Related Questions