툴팁을 마우스 왼쪽에서 볼 수있게 만드는 방법은 무엇입니까?

Question

툴팁 용 장난감 코드가 있습니다. 툴팁에 마우스를 갖다 대면이 논리로 숨겨지는 것을 제외하면 괜찮습니다.

마우스를 올려 놓았을 때 툴팁이 보이지 않게하는 방법을 알아 내려고 노력하고 있습니다. 두 영역에서 마우스를 가져 가면 사라질 것입니다. 누구나 제안이 있으십니까?

See the example.

HTML

<div id="container"> 
    <div id="div1"></div> 
    <div id="div2"></div> 
</div> 

자바 스크립트

var div1 = $("#div1"); 
var div2 = $("#div2").hide(); 

var hoverTimer; 
div1.mouseenter(function(e) { 
    var x = e.pageX; 
    var y = e.pageY; 
    div1.mousemove(function(e) { 
     x = e.pageX; 
     y = e.pageY; 
    }); 
    hoverTimer = window.setTimeout(function() { 
     div2.css("left", x); 
     div2.css("top", y); 
     div2.show(); 
    }, 400); 
}); 

div1.mouseleave(function(e) { 
    window.clearTimeout(hoverTimer); 
    div2.hide(); 
}); 

CSS

#container { 
    position: relative; 
} 
#div1 { 
    float: left; 
    clear: none; 
    width: 200px; 
    height: 200px; 
    background-color: green; 
} 
#div2 { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
} 

Answer 1

두 개의 변수를 설정하는 것 외에도 mousemove 이벤트를 만들지는 않지만 실제로는 툴팁을 움직이지 않습니다. 대신 this을 시도하십시오. 참고 마우스 위치에 16 픽셀 "여백"을 추가했습니다. 이는 실제 툴팁과 더 많은 인라인을 이루고 깜박 거리는 효과를 방지합니다.