Keep 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 positioned at the mouse location + 10 (X and Y) fine, but when there is a tooltip at the bottom of the browser and it is big enough (and there are some large tooltips that I can't change), the tooltip will extend past the browser window making it hard to see or scroll to. How do you go about checking if the tooltip will extend past the browser window and then move it accordingly?

Answer 1

Not really an answer to your question, but why not use one of the great jQuery tooltip plugins that are already out there? My favorite is included with jQuery Tools. This example shows an implementation that is placed dynamically based on it's proximity to the edge of the viewport.