Store tooltip inside browser window? (without using plugins)

Question

My tool tip code is as follows:

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;
});

This will show a tooltip located in the + 10 mouse area (X and Y) in order, but when there’s a tooltip at the bottom of the browser and it’s big enough (and there are some big tooltips that I can "t change), a tooltip the tooltip will go through the browser window, which makes browsing or scrolling difficult.How are you going to check if the tooltip will expand beyond the browser window and then move it accordingly?

Answer 1

, jQuery, ? jQuery Tools. , .