使用jQuery定位和显示隐藏元素

Question

Trying to implement something similar to qtip, but using a table that compares the features of different things instead, and am running into an issue positioning the hidden elements I want to show on mouseover. Any help would be much appreciated. http://jsfiddle.net/2HMjQ/

Answer 1

Instead of event.pageY , I tried to use $(this).position().top and an offset of 50 to position is right below the link. See below,

content.on('mouseenter',function(){ //Used .on instead of bind
    var index=content.index(this);
    if(index<0){
        stop();
    }
    else{
        content.eq(index).css("font-weight","bold");
        display.stop(true,true);
        display.eq(index).css("top",+ $(this).position().top + 50); //Changed
        display.eq(index).fadeIn('slow');
    }
}).on('mouseleave',function(){ //Used .on instead of bind
    var index=content.index(this);
    display.hide();
    content.css("font-weight","normal");
});    

DEMO: http://jsfiddle.net/2HMjQ/13/

Answer 2

display.eq(index).css("top",+event.PageY);

needs to be:

display.eq(index).css("top",+event.pageY); - notice the lowercase 'p'.

Answer 3

It looks like there's a simple problem with case. event.PageY should be event.pageY.

I've fixed this and made some minor CSS changes tinkering around with your code here: http://jsfiddle.net/2HMjQ/11/