Message on cell hover

[kavyasetty]

is it possible to show a message on cell hover in pqgrid?

[paramvir]

apply title attr to the desired cell $.attr()

and use jQueryUI tooltip.

[kavyasetty]

thanks, it worked.

[Rufus]

Is it possible to have a tooltip that is specific to the data in each cell of the table?

For example, if using the table to load test grades (97%, 100%, 80%, etc.), I'd like to show the point value for that test when you hover over the score. So, if a test was worth 50 points and the grade was a 98%, I'd like the tooltip to show "49 Points out of 50".

Is it possible to load this in with the data in some way, similar to how you can load cellCls?

Thanks in advance for any help!

[paramvir]

add title attribute to cell in column.render

Code: [Select]

column.render = function( ui ){
  return '<span title="add title specific to this cell based on ui.rowData">' + ui.cellData + '</span>';
}


[Rufus]

Thanks for the help here but I'm not quite sure what to do with this code....I tried inserting it directly in just before the following:


    var $grid = $("#grid_row_styles").pqGrid(obj);

But I'm not having any luck....

However, based upon the render method that you mentioned, I came across some other info and worked up the following:

   $.extend(obj.colModel[3], {
         render: function (ui) {
            var rowData = ui.rowData; ;
            return "<span title='tooltip'>" + ui.rowData[3] + "</span>";
         }
   } );

This code does get the tooltip to show over all of the cells in that column....but the data in that column now shows as "undefined".

Thoughts on what I'm missing?

Additionally, assuming I can get this code to work, how would I modify it to include info from a hidden column as the tooltip instead of a constant like the "tooltip" I'm currently using?

Many thanks in advance!

[Rufus]

Update.....

The following:

       $.extend(newObj.colModel[7], {
         render: function (ui) {
            var rowData = "<span title='tooltip test'>" + ui.cellData + "</span>";
            return rowData;
         }
   } );

Gets me the correct data in the cells and the static "tooltip" text when hovering....but I need each tooltip to be the value from another (hidden) column....so here's what I've tried.

       $.extend(newObj.colModel[7], {
         render: function (ui) {
            var rowData = "<span title='" + ui.cellData[6] + "'>" + ui.cellData + "</span>";
            return rowData;
         }
   } );

But this is giving me "undefined" as the tooltip....

[paramvir]

It's ui.rowData[ dataIndx ] instead of ui.cellData[ dataIndx ]