마우스 왼쪽에 툴팁이 표시됩니다.

Question

내 웹 사이트에 간단한 툴팁을 구현하려고합니다. 그것은 커서의 오른쪽에 툴팁을 보여주는 괜찮 았지만, 지금은 커서의 왼쪽에만 위치하는 동일한 효과를 얻으려고합니다. 이것을 어떻게 성취합니까? http://jsfiddle.net/3r5aq/

은 아마 초보자 것은 물어,하지만 자신을이 일을 알아낼 수 없습니다

여기 내 코드입니다.

Answer 1

당신은 툴팁의 폭을 계산할 수 있습니다. 분명히 페이지에 여러 개가있는 경우 선택기를 업데이트해야합니다.

.mousemove(function(e) { 
      var mousex = e.pageX - 5 - $(".tooltip").width(); //Get X coordinates 
      var mousey = e.pageY;  //Get Y coordinates 
      $('.tooltip') 
      .css({ top: mousey, left: mousex}) 
    }); 

http://jsfiddle.net/3r5aq/18/

Answer 2

당신은 단순히 툴팁의 크기에 따라 x 값을 수정하여 왼쪽으로 이동을 변경할 수 있습니다

var mousex = e.pageX - $('.tooltip').width() - 20; 

Answer 3

나는 다음을 사용 : 링크가 너무 멀리 페이지에 남아있는 경우

var mousex; 
var left = e.pageX - $('.tooltip').width() - 20; 
if(left > 0)    
    mousex = left; 
else 
    mousex = 0; 

이 방법 툴팁은 가시 영역의 외부에서 실행되지 않습니다.

DEMO

Answer 4

$(document).ready(function() { 
     // Tooltip only Text 
     $('.nextTooltip').hover(function(){ 
       // Hover over code 
       var title = $(this).attr('title'); 
       $(this).data('tipText', title).removeAttr('title'); 
       $('<p class="tooltip"></p>') 
       .text(title) 
       .appendTo('body') 
       .fadeIn('fast'); 
     }, function() { 
       // Hover out code 
       $(this).attr('title', $(this).data('tipText')); 
       $('.tooltip').remove(); 
     }).mousemove(function(e) { 
       var mousex = e.pageX;  //Get X coordinates 
       var mousey = e.pageY;  //Get Y coordinates 
       $('.tooltip').each(function(ix, item) { 
        $(item).css({ 
         top: mousey, 
         left: mousex - $(item).width() - 20 
        }); 
       }); 
     }); 
});​