Forum

November 2nd, 2014
A A A
Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
sp_Feed Topic RSS sp_TopicIcon
Tooltip on row hover with AJAX content - SOLUTION
12/01/2009
18:29
Avatar
palobo
Portugal
Member
Members
Forum Posts: 41
Member Since:
13/11/2008
sp_UserOfflineSmall Offline

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.

14/01/2009
08:10
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

Thanks for sharing this solution to community.

Best Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

15/01/2009
16:35
Avatar
vkapoor
vkapoor
Member
Members
Forum Posts: 4
Member Since:
16/01/2009
sp_UserOfflineSmall Offline

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

16/01/2009
08:08
Avatar
palobo
Portugal
Member
Members
Forum Posts: 41
Member Since:
13/11/2008
sp_UserOfflineSmall Offline

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,

P.

16/01/2009
20:01
Avatar
palobo
Portugal
Member
Members
Forum Posts: 41
Member Since:
13/11/2008
sp_UserOfflineSmall Offline

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

30/08/2010
20:54
Avatar
jakemonO
Member
Members
Forum Posts: 16
Member Since:
20/08/2010
sp_UserOfflineSmall Offline

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

31/08/2010
21:58
Avatar
ladracu2001
Argentina
Member
Members
Forum Posts: 5
Member Since:
20/08/2010
sp_UserOfflineSmall Offline

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.

09/12/2011
14:14
Avatar
wasim
indore
New Member
Members
Forum Posts: 1
Member Since:
09/12/2011
sp_UserOfflineSmall Offline

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

<style>#tooltip{position:absolute;}</style>

Thanks

18/08/2014
10:17
Avatar
kirti
New Member
Members
Forum Posts: 1
Member Since:
18/08/2014
sp_UserOfflineSmall Offline

Can you please post a demo.

Thanks

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
52 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1255

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11373

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10592

Posts: 31289

Newest Members:

, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information