jQuery Grid Plugin - jqGrid - Topic: How to set custom tooltip content?

J on How to set custom tooltip content?

Thu, 08 Sep 2011 18:31:43 +0300

PawelRoman said:I was unclear, sorry. Imagine I have a table with 3 columns, In the first row, cell values are "A", "B", "C", I pass these values in XML they are redered OK. Now, i want to have a tooltip when hovering over a cell "A", and the tooltip content must be "D" (which as you see has nothing to do with ANY cell data). How do I send this "D" value to the grid? Of course it is a dynamic value thet I prepare on a server side, not a static 'd' letter. Do I have to have an extra hidden column for it or something like this?

Do something like this:

loadComplete: function (data){
                       var arr =jQuery("#grid").jqGrid('getDataIDs');
                       for(var i = 0; i < arr.length; i++ ){
                               var d = jQuery("#grid").getRowData(arr[i]);

jQuery("#grid").jqGrid('setCell', arr[i],<cellName of A>, <value of item to go into cell> ,"", {title: d.D});

}

look at my code here :http://www.trirand.com/blog/?page_id=393/help/how-to-stop-nselectrow-from-being-called-in-both-the-grid-and-subgrid/

PawelRoman on How to set custom tooltip content?

Thu, 08 Sep 2011 10:17:03 +0300

I was unclear, sorry. Imagine I have a table with 3 columns, In the first row, cell values are "A", "B", "C", I pass these values in XML they are redered OK. Now, i want to have a tooltip when hovering over a cell "A", and the tooltip content must be "D" (which as you see has nothing to do with ANY cell data). How do I send this "D" value to the grid? Of course it is a dynamic value thet I prepare on a server side, not a static 'd' letter. Do I have to have an extra hidden column for it or something like this?

OlegK on How to set custom tooltip content?

Wed, 07 Sep 2011 18:06:39 +0300

I wrote you in the previous answer that cellattr attribute can be a function which has up to three parameters. The second parameter is the cell value (val).

cellattr: function (rowId, val) {
return val === "foo" ? ' title="bar"' : ' title="You should do ' + val + '!!!"';
}

You can even test for the values from other columns of the same row and generate a title based on the values from many

columns.cellattr: function (rowId, val, rawObject) {
return ' title="' + rawObject.firstName + ' ' + rawObject.lastName '"';
}

Best regards
Oleg

PawelRoman on How to set custom tooltip content?

Wed, 07 Sep 2011 17:17:37 +0300

Thanks for quick answer. What if my title is not a static text but is a custom value depending on a cell value (but it is not a cell value itself)? How do I pass such value?

OlegK on How to set custom tooltip content?

Wed, 07 Sep 2011 16:54:36 +0300

You can use cellattr attribute in the colModel for a column to set custom tooltip. For example

cellattr: function () { return ' title="my custom fixed tooltip for the column"'; }

define the attribute as a fixed text. I use such form for grid having many checkboxs. In the case I set just the column title as the tooltip.

Another more full form can be

cellattr: function (rowId, val, rawObject) {
return rawObject[4] === "1" ? ' title="verified"' : ' title="not verified"';
}

In the case one can use val (the cell value) and the rawObject - the raw representation of the row of data. It has the same format as in JSON/XML data which you use to fill the data. So instead of rawObject[4] you could have to use rawObject.myColName.

Best regards
Oleg

PawelRoman on How to set custom tooltip content?

Wed, 07 Sep 2011 16:38:25 +0300

Hi, this is a very simple question: how do I set a custom tooltip that would appear when hovering over a grid cell? I'm talking about HTML title attribute in grid's <td> element.

It seems that there is title flag in options but it allows only for switching on/off the title. How can I actually set this title to my own custom value for given cell?