jqGrid and BeautyTips

I love jqGrid. I also like (not love) BeautyTips for creating nicer tooltips or better known as “talk bubbles” or “help balloons”.
The combination of jqGrid and BeautyTips is great when you have a row where there are some kind of “comment” for the row or other large textual information.

The problem with BeautyTips is that it doesn’t work very well with relative positioned elements - like jqGrid! What happens is that the comment becomes hidden behind the jqGrid header/footer, like this:

The good thing is that BeautyTips has a setting called offsetParent. That property tells BeautyTips in which DOM-object the tooltip (balloon) should be appended. Default is the body DOM-object which causes the problem. But if we append the tooltip into the jqGrid DOM (a div). The problem is solved! We just need to find what the jqGrid top DOM object is. jqGrid uses an id for its created top DOM element: “gbox_XXX”. E.g.:

   1: offsetParent: $('#gbox_gridId')

“gridId” is the id of the table you use for jqGrid:

   1: <table id="gridId"></table>

   1: $('#gridId').jqGrid({...});

Now we get a nice looking tooltip, like the first picture above.