Hi all.

I spent some time tracking down an elegant way to solve a small problem I had and am posting the solution here in the hope it will be useful for some.

The problem

In a current project, I have a grid (various actually) with many columns. Personaly I hate sidescrolling and think it is unelegant. I initially opted to hide columns I thought would be less important. The columns had be present in edit for later retrieval of the data (repots and such…) but not visible all the time, or so I thought. Then I got complaints that the users could not see the data until the printed out a report (ok, in retrospect that was a major no no in usability terms :(… my bad ).

The Solution (for me anyway 🙂 )

An elegant tooltip that would appear when we hovered over a row displaying all the hidden data. Nice. Now off to work on that solution.

Now there area quite a few plugins for tooltips but none seemed to catch my eye until i found this (not a plugin). It shows a simple and elegant way to achieve a tooltip with a few lines jQuery and CSS. Now the initial script fetches data from the title attribute so a little alteration was in order.

FIrst on the menu. I found no clear way of getting the row id on hover. We have a few methods at our disposal, onDblClick, selectrow etc but no onHover (hint hint Tony 🙂 ) so one had to be quickly forged.

This is how I got it working… (finally after so much rambling… 😀 )

$("#grid").jqGrid({
...
...
...
gridComplete: function(){