jQuery : 가장 우아하고 효율적인 방식으로 팝업 정보 팝업

Question

커서가 요소 위에 있고 고정 된 거리 내에있을 때 나타나는 부동 정보 팝업 (또는 호출 방법)을 구현하고 싶습니다. 커서를 더 적은처럼 여기 인스턴스 일 경우 :

http://www.nytimes.com/interactive/2008/09/15/business/20080916-treemap-graphic.html

말, 나는 100 명 div의가있는 나는 팝업을 표시 할 수 있습니다. 나는 두 가지 방법으로 그 일을 생각 :

1. 각 사업부를 들어, HTML 코드에서 내가 보여 mousemove에, 커서의 위치로 이동하고 mouseleave에 내가 그것을 숨기고, 숨겨진 팝업 DIV 있습니다. 각 div에는 mousemove (x100) 및 mouseenter 이벤트 바인딩 (x100)이 있습니다.

2. 나는 mouseenter과 mouseleave에있는 각 div에 대해 페이지의 주 영역에 대해 하나의 mousemove을 가지고 있습니다. 팝업을 표시하거나 숨 깁니다. 각 div (x100)에 대해 mousemove (x1)과 mouseenter + mouseleave이 있습니다.

내 질문은 :

1. 이 길인가? 아니면 더 나은 jQuery 메커니즘을 사용할 수 있습니까?

2. mousemove 및 100 mousemove 콜백이 하나 인 경우 성능에 차이가 있습니까?

Answer 1

부동 정보 팝업

이라고 툴팁 (또는 호출하는 방법) 자신의 압연에 관해서

(many 자바 스크립트/jQuery를에 이들에 대한 플러그인이 있습니다) 알아 낸 것 같으면 div에 대해 mouseover/mousemove/mouseout 개의 이벤트를 만들어야합니다. 성능에 관해서는

var $tooltip = $('#tooltip'), // reusable jQuery obj 
    offset = {x: 20, y: 20}; // tooltip offset from the cursor 

$('#container div').mouseover(function() { // over 
    $tooltip.show() 
}).mousemove(function(e) { // move 
    // set the positioning with offset 
    $tooltip.css({left: e.pageX + offset.x, top: e.pageY + offset.y}) 
    // set the tooltip HTML contents 
    $tooltip.html('[your content]'); 
}).mouseout(function() { // out 
    $tooltip.hide(); 
}); 

example jsfiddle

: jQuery를 통해이 같이 보일 것입니다 위의 테스트 케이스뿐만에 빠른 작업/초를 나타냅니다 않는 용기에 mousemove 이벤트를 설정 jsperf - mousemove parent vs children

실생활에서 사용하면 차이를 느낄 것 같지 않습니다.

여기에만 컨테이너의 mousemove 이벤트가 설정 한 예입니다

example jsfiddle #2

Answer 2

qTip과 같은 jquery 용 프리 머드 플러그인을 사용 해본 적이 있습니까? http://craigsworks.com/projects/qtip2/download