創建工具提示簡單指南？

Question

爲什麼在下面的代碼（示例）工具提示框從頁面出來，它怎樣才能修復爲自動（動態）頁面不能從頁面出來？

演示：http://jsfiddle.net/3UzDG/（我鬃毛大約how該鼠標就可以顯示toltip框出頁）見圖片：

$('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插件可用於工具提示 - 它完全按照您的要求 - 查看源代碼以查看id如何檢查視口大小等。http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/