将工具提示保留在浏览器窗口内？ （不使用插件）

我的工具提示代码如下：

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）处的工具提示，但是当浏览器底部有一个工具提示并且它足够大时（并且有一些我无法更改的大工具提示） ，工具提示将延伸到浏览器窗口之外，使其难以看到或滚动到。如何检查工具提示是否会超出浏览器窗口，然后相应地移动它？

并不是你问题的真正答案，但为什么不使用已经存在的优秀 jQuery 工具提示插件之一呢？我最喜欢的是包含在jQuery 工具 http://flowplayer.org/tools/demos/tooltip/dynamic.html. 这个例子 http://flowplayer.org/tools/demos/tooltip/dynamic.html显示了根据与视口边缘的接近程度动态放置的实现。