保持瀏覽器窗口內的工具提示？ （不使用插件）

Question

我的刀尖代碼如下：

HTML/CSS

a.tooltip span 
{ 
    display: none; 
    padding: 5px; 
    border: 1px solid #000; 
    background: #999; 
    position: absolute; 
    color: #fff; 
    text-align: left; 
} 

<a href="#" class="tooltip">[Help]<span>This is the tooltip</span></a> 

的jQuery：

$('a.tooltip').hover(
     function(e) { 
      $(this).children('span') 
       .css('display', 'block') 
       .css('width', '300px') 
       .css('left', e.pageX + 10) 
       .css('top', e.pageY + 10).show(); 
     }, 
     function() { 
      $(this).children('span').hide(); 
     } 
    ).click(function() { 
     return false; 
}); 

這將顯示位於鼠標位置+ 10的工具提示（X和Y）很好，但是當瀏覽器底部有一個工具提示並且它足夠大（並且有一些我無法更改的大型工具提示）時，工具提示將會延伸到瀏覽器窗口之外，從而使其很難看到或滾動到。你如何去檢查工具提示是否會延伸到瀏覽器窗口，然後相應地移動它？

Answer 1

不是你的問題的答案，但爲什麼不使用已經在那裏的一個偉大的jQuery工具提示插件？我最喜歡的是jQuery Tools。 This example顯示了一個基於它靠近視口邊緣動態放置的實現。