0

I have jqgrid coloumn on which I want to customize my tooltip just for one column while for others I need default tooltip.

Any leads ?

My column is something like the below

....
{
                            name : 'title',
                            index : 'title',
                            width : '20%',
                            align : 'center',
                            sorttype : false,
                            sortable : false
                        }
sahana
  • 601
  • 5
  • 12
  • 33
  • I think that you need just define `cellattr` callback in `colModel` for the column where the custom tooltip need shown. Look at [the answer](http://stackoverflow.com/a/7408355/315935). – Oleg Jan 20 '15 at 16:15
  • @Oleg I tried cellattr: function (rowId, val, rawObject, cm, rdata) { return 'title="hallo "'; } But it still shows the default value only. Can you please help ? – sahana Jan 21 '15 at 05:17
  • Do you tried [the demo](http://www.ok-soft-gmbh.com/jqGrid/DataWithCustomTitle.htm) which displays custom tooltip in "Clients" column (`name: 'name'` in `colModel`)? If you have problems in *your* code you should append your question with your more full code. I suppose that you placed the callback `cellattr` in the wrong place. – Oleg Jan 21 '15 at 06:01
  • This is how I tried. name : 'title', index : 'title', formatter : function(cellValue, options, rowObject) { return rowObject.linkName; }, width : '100%', cellattr: function (rowId, val, rawObject, cm, rdata) { return 'title="hallo "'; }, align : 'left', sorttype : 'text', – sahana Jan 21 '15 at 09:11
  • **Which version of jqGrid you use?** Some old versions don't have `cellattr` at all. Later version of jqGrid have small bug and the value from `cellattr` have to start with one space: `return ' title="hallo "';`. Try to add the space and to repeat your test. – Oleg Jan 21 '15 at 09:32
  • @Oleg jqgrid version is 3.8.2. Even after adding space as you said I am not able to overwrite the tooltip value. – sahana Jan 21 '15 at 11:26

5 Answers5

2

Tooltip for Header

If you want tooltip for header of column you can just add title attribute with jquery like this:

if your grid container this:

<div id="myJqgrid"></div>

then yout js will be like this:

$("#jqgh_myJqgrid_title").attr("title", "Can't sort my title!");

Header name selector id forms like this:

jqgh_<<grid_div_name>>_<<column_name>>

Tooltip for cell in column

If you need tooltip for column you can use cellattr function.

You can even create different tooltip for each cell in column base on cell or row value, becouse function have optional parameters: rowId, cellValue, rawObject etc (documentation)

In your case you can do like this:

{
   name : 'title',
   index : 'title',
   width : '20%',
   align : 'center',
   sorttype : false,
   sortable : false,
   cellattr: function () { return ' title="Here is my tooltip on colCell!"'; }
}
teo van kot
  • 12,350
  • 10
  • 38
  • 70
0

The version 3.8.2 of jqGrid was published in 2010. It's really very old. The features like cellattr was introduced later in jqGrid 4.0 (see here).

I would strictly recommend you to update it to jqGrid 4.7.0 or jqGrid 4.6.0.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thanks for the appropriate guidance. Is there any way to add tool tip with the version I use ? – sahana Jan 21 '15 at 11:51
  • Only to set `title` attribute explicitly on every `` of the column. For example you can use the following `loadComplete` callback: loadComplete: function () { $(this).find(">tbody>tr.jqgrow>td:nth-child(5)").attr("title", "some text"); } It will set `"some text"` tooltip on all of 5-th column of the grid. See [the answer](http://stackoverflow.com/a/6091535/315935) to get the index of the column based on the column name. – Oleg Jan 21 '15 at 12:38
  • Thank you. Will try and let you know. – sahana Jan 21 '15 at 12:57
0

Assuming you already have the data (xml, json ...) you could have hidden values in a column and used cellattr to indicate the value of each column. For example if you have three columns:

//tooltip obtained from hidden column for the first column
{
    name : 'title',
    index : 'title',
    width : '20%',
    align : 'center',
    sorttype : false,
    sortable : false,
    cellattr: function (rowId, cellValue, rowObject) {
                   return ' title="' + $(rowObject).find('cell:eq(3)').text() + '"';
              }
}, 
//default tooltip obtained from hidden column
{
    name : 'subtitle',
    index : 'subtitle',
    width : '20%',
    align : 'center',
    sorttype : false,
    sortable : false,
    cellattr: function (rowId, cellValue, rowObject) {
                   return ' title="' + $(rowObject).find('cell:eq(4)').text() + '"';
              }
},
//here you can set as in the column subtitle or put the default tooltip that you want
{
    name : 'subtitle2',
    index : 'subtitle2',
    width : '20%',
    align : 'center',
    sorttype : false,
    sortable : false,
    cellattr: function (rowId, cellValue, rowObject) {
                   return ' title=" My default tooltip "';
              }
},
//hidden columns
{
    name : 'hiddenColumn1',
    index : 'hiddenColumn1',
    hidden: true,
},
{
    name : 'hiddenColumn2',
    index : 'hiddenColumn2',
    hidden: true,
},
rockerchain
  • 31
  • 8
0

You would need to use jquery to create “title” HTML attribute for tooltips.

jQuery(document).ready(function($){

jQuery("tr.ui-jqgrid-labels th:eq(0)").attr("title", "Column 1 header title");

jQuery("tr.ui-jqgrid-labels th:eq(1)").attr("title", "Column 2 header title");

jQuery("tr.ui-jqgrid-labels th:eq(2)").attr("title", "Column 3 header title");

});

user2090762
  • 87
  • 1
  • 11
0

I use this code for a set custom tooltip:

{
name : 'title',
index : 'title',
width : '20%',
align : 'center',
sorttype : false,
sortable : false,
cellattr: function (rowId, cellValue, rowObject) {
               return ' title="' + $(rowObject)[3] + '"';
          }

},

leyla azari
  • 913
  • 11
  • 20