Javascript 如何抵消&；是否阻止工具提示通过页面底部边缘？

我正试图找出要添加到脚本中的内容，以防止工具提示越过页面底部的边缘。非常感谢您的帮助和时间，谢谢

<!-------------SCRIPT---------------->

    <script>
    $(document).ready(function() {
            // Tooltip only Text
            $('.masterTooltip').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('slow');
            }, function() {
                    // Hover out code
                    $(this).attr('title', $(this).data('tipText'));
                    $('.tooltip').remove();
            }).mousemove(function(e) {
                    var mousex = e.pageX + 20; //Get X coordinates
                    var mousey = e.pageY + 10; //Get Y coordinates
                    $('.tooltip')
                    .css({ top: mousey, left: mousex })
            });
    });
    </script>



 <!--------------CSS------------------>   
    <style>
    .tooltip {
        display:none;
        position:absolute;
        border:1px solid #333;
        background-color:#161616;
        border-radius:5px;
        padding:10px;
        color:#fff;
        font-size:12px Arial;
    }
    </style>


<!------------------HTML----------------->    
    <a href="#" title="This will show up in the tooltip" class="masterTooltip">Your Text</a>
    <p title="Mouse over the heading above to view the tooltip." class="masterTooltip">Mouse over the heading text above to view it's tooltip.</p>
    <img src="image.jpg" class="masterTooltip" title="Tooltip on image" />

$（文档）.ready（函数（）{
//仅工具提示文本
$（'.masterTooltip'）。悬停（函数（）{
//悬停在代码上方
var title=$（this.attr（'title'）；
$（this.data（'tipText'，title.）.removeAttr（'title'）；
$（“
”）
.正文（标题）
.appendTo（'正文'）
.fadeIn（“慢”）；
}，函数（）{
//悬停代码
$（this.attr（'title'，$（this.data（'tipText'））；
$（'.tooltip'）.remove（）；
}).mousemove（函数（e）{
var mousex=e.pageX+20；//获取X坐标
var mousey=e.pageY+10；//获取Y坐标
$（“.tooltip”）
.css（{top:mousey，left:mousex}）
});
});
.工具提示{
显示：无；
位置：绝对位置；
边框：1px实心#333；
背景色：#161616；
边界半径：5px；
填充：10px；
颜色：#fff；
字体大小：12px Arial；
}
将鼠标悬停在上面的标题文本上以查看其工具提示

---

演示：？

您需要检查页面的高度，如果菜单的高度+菜单（顶部）的Y位置大于该高度，则调整菜单的顶部位置

var boxX = e.pageX;
var boxY = e.pageY;
var menuHeight = $('.tooltip').outerHeight();
var bodyHeight = $('body').height();
if ((boxY + menuHeight) > bodyHeight){
    boxY = bodyHeight - menuHeight;
}
$('.tooltip').css({ top: boxY + 'px', left: boxX + 'px' })