jQuery Grid Plugin - jqGrid - Topic: Tooltip on row hover with AJAX content - SOLUTION

kirti on Tooltip on row hover with AJAX content - SOLUTION

Mon, 18 Aug 2014 10:17:02 +0300

Can you please post a demo.

Thanks

wasim on Tooltip on row hover with AJAX content - SOLUTION

Fri, 09 Dec 2011 14:14:39 +0200

Thanks for helping us.. that code is working fine.. but one issue.. many people may have this problem

put <div id="tooltip"></div> any where at your page and also give this css too

Thanks

ladracu2001 on Tooltip on row hover with AJAX content - SOLUTION

Tue, 31 Aug 2010 21:58:29 +0300

I implemented the code but I find difficulties. Please explain how it is implemented. As I replace your code in "var str" and "$. Post ('data2.php.'" If you be so kind as to explain to you thank you very much.

Implement the method without the post method. Nice work.

A bug in the method causes mouse over the tooltip is not displayed in the first row until you move the mouse to the next cell.

jakemonO on Tooltip on row hover with AJAX content - SOLUTION

Mon, 30 Aug 2010 20:54:12 +0300

works but you need to remember to put the "tooltip" div into your HTML (even if it's empty) and set the css for the tooltip div to position: absolute

palobo on Tooltip on row hover with AJAX content - SOLUTION

Fri, 16 Jan 2009 20:01:49 +0200

As requested, here is a demo page put together in much haste so please forgive it's poor appearance and content.

Also, check out the theme I'm working on for jqGrid and let me know what you think of it. Click on search for a better idea of the form and modal window.

Cheers,
P.

Demo

palobo on Tooltip on row hover with AJAX content - SOLUTION

Fri, 16 Jan 2009 08:08:57 +0200

Hi vkapoor.

Each row in jqGrid has a class of jqgrow. Therefore, the best way that I could find to target the row hover was to target $("#.jqgrow").

I will try and post a working demo of this as soon as possible. Hopefully this weekend Iwill have some spare time and do just that.

Not being any sort of jQuery expert I would need some help, but I would definetly like to try and port this to a plugin which could more esaily be integrated with jqGrid. (Hint hint Tony or any other expert around the forum!)

Cheers,

vkapoor on Tooltip on row hover with AJAX content - SOLUTION

Thu, 15 Jan 2009 16:35:35 +0200

palobo, I tried to use the snippet you provided. Can you please tell me what $(”.jqgrow”) is ?. That is not the main grid is it?.

Can you please post a demo.

Thanks

tony on Tooltip on row hover with AJAX content - SOLUTION

Wed, 14 Jan 2009 08:10:22 +0200

Hello,

Thanks for sharing this solution to community.

Best Regards

Tony

palobo on Tooltip on row hover with AJAX content - SOLUTION

Mon, 12 Jan 2009 18:29:46 +0200

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(){
    var rowid; //ID of row with mouseover
    var my_tooltip = $("#tooltip"); Div created for tooltip

    $(".jqgrow").mouseover(function(e){
        rowid = $(e.target)
                .parents("tr:first")
                .attr('id');

        $.post('data2.php',
            {id: +rowid },
            function(data){
                var obj = eval('(' + data + ')');
                var str = "Place data returned from ajax call in a nicely format manner here."

$("#tooltip").html(str);
});

$(".jqgrow").css({cursor:'pointer'})
            .mouseover(function(){
            my_tooltip.css({opacity:0.85, display:"none"})
.stop() // Added stop() to fix bug, flickering of tooltip
.fadeIn(400);
            })
.mousemove(function(kmouse){
    var border_top = $(window).scrollTop();
    var border_right = $(window).width();
    var left_pos;
    var top_pos;
    var offset = 15;
    if(border_right - (offset *2) >= my_tooltip.width() + kmouse.pageX){
        left_pos = kmouse.pageX+offset;
     } else{
        left_pos = border_right-my_tooltip.width()-offset;
     }

     if(border_top + (offset *2)>= kmouse.pageY - my_tooltip.height()){
        top_pos = border_top +offset;
     } else{
        top_pos = kmouse.pageY-my_tooltip.height()-offset;
     }

    my_tooltip.css({left:left_pos, top:top_pos});
            }).mouseout(function(){
                my_tooltip.stop().fadeOut(400);
            });
        });
},

I will post a demo online as soon as I can with this working and my theme for jQGrid.

Anyway, sorry for the long post and all the rambling, but I hope this helps someone.

All credits go to the authors of the tooltip, jqGrid and jQuery. I'm just the monkey that mangled them together... 😀

Cheers,
P.