툴팁을 간단하게 만들었습니까?

Question

다음 코드 (예)에서 툴팁 상자가 페이지에서 나오는 이유는 페이지에서 나오지 않는 페이지로 어떻게 자동 (동적)으로 고칠 수 있습니까?

는

데모 : http://jsfiddle.net/3UzDG/ SEE (내가 갈기는 그것에 대해에 마우스를 통해이 페이지를 상자 toltip 표시 how입니다) 이미지 :

$('li a').hover(function() { 

    var title = $(this).next('.tooltip').html(); 
    var offset = $(this).offset(); 

    $tooltip = $('<div />').addClass('show_tooltip').html(title); 

    var delay = setTimeout(function() { 

     $('body').append($tooltip); 
     var width = $tooltip.outerWidth(); 

     var p_top = offset.top; 
     var p_left = offset.left - width; 
     $tooltip.css({top: p_top, left: p_left}).fadeIn(180); 

    },280); 

    $(this).data('delay', delay); 
    $(this).data('tooltip', $tooltip); 

},function() { 

    delay = $(this).data('delay'); 
    $tooltip = $(this).data('tooltip'); 
    $tooltip.remove(); 
    clearInterval(delay); 

}); 

Answer 1

당신은 툴팁가는 경우 감지 할 필요가 현재 뷰포트를 겹쳐서 그에 맞게 조정하십시오 .... 이미 툴팁에 사용할 수있는 jQuery 플러그인이 있습니다 - 정확히 원하는대로 수행합니다 - 소스가 뷰포트 크기 등을 확인하는 방법을 확인하십시오 http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/