jQuery에서 요소 근처의 마우스 기능

Question

마우스가 테이블 머리 요소 근처에있을 때 도구 설명을 추적하여 표시하려고합니다. mouseenter 이벤트와 함께 작동하지만 근처에 오면 mouseenter 앞에 툴팁을 표시하고 싶습니다. 또한 mouseout 테이블 헤드에서 약간 떨어진 곳에서 툴팁을 제거하고 싶습니다.

이것은 내 코드입니다.

$('thead').mouseenter(showtooltip); 
$('thead').mouseout(removetooltip); 

jQuery로 어떻게 할 수 있습니까?

Answer 1

이것은 작동합니다. 첫 번째 매개 변수는 모든 jQuery 객체가 될 수 있습니다. 두 번째 매개 변수는 객체에 대한 근접성 (이 경우 20px)입니다.

데모 : http://jsfiddle.net/ThinkingStiff/Lpg8x/

스크립트 : 여백을 통해 당신은 마우스 다음 툴팁이 표시됩니다 그래서 만약

$('body').mousemove(function(event) { 

    if(isNear($('thead'), 20, event)) { 
     //show your tooltip here 
    } else { 
     //hide it here 
    }; 

});   

function isNear(element, distance, event) { 

    var left = element.offset().left - distance, 
     top = element.offset().top - distance, 
     right = left + element.width() + 2*distance, 
     bottom = top + element.height() + 2*distance, 
     x = event.pageX, 
     y = event.pageY; 

    return (x > left && x < right && y > top && y < bottom); 

};