Forum
Log In
Home
Topic RSS
18:29
13/11/2008
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... 😀 )
...
...
...
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.
08:10
Moderators
30/10/2007
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.
16:35
16/01/2009
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
08:08
13/11/2008
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.
20:01
13/11/2008
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.
20:54
20/08/2010
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
21:58
20/08/2010
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.
14:14
09/12/2011
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
Most Users Ever Online: 715
Currently Online:
20 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.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
