JQuery - Keeping Tooltip in view

I seem to have been able to achieve this vertically but I can't seem to get the horizontal flip to work.

$("a.tooltip").mousemove(function(e) {
    //$("#tooltip")
        //.css("top",(e.pageY - xOffset) + "px")
        //.css("left",(e.pageX + yOffset) + "px");
    var posY;
    var posX;

    // Flip Tooltip Vertically
    if (e.pageY - $(window).scrollTop() + $('#tooltip').height() >= $(window).height() ) {
        posY = $(window).height() + $(window).scrollTop() - $('#tooltip').height() - 20 ;
    } else {
        posY = e.pageY - 20;
    }

    // Flip Horizontally?
    if (e.pageX - $(window).scrollLeft() + $('#tooltip').width() >= $(window).width() ) {
        posX = $(window).width() + $(window).scrollTop() - $('#tooltip').width() - 20 ;
    } else {
        posX = e.pageX - 20;
    }

    $("#tooltip"开发者_如何转开发)
        .css("top",(posY) + "px")
        .css("left",(posX) + "px");
});

I'm not really following your code, but here is a snippet from another project that might be of help. You can adjust the values of x, y and limitY so it fits your design.

$('a.tooltip').mousemove(function(e) {
    var x = pageX = e.pageX,
        y = pageY = e.pageY,
        $elem = $( '#tooltip' ),
        height = $elem.outerHeight( true ),
        width = $elem.outerWidth( true ),
        limitY = height + 15,
        maxX = $(window).width() - width,
        maxY = $(window).height() - height;

    if ( !isNaN(x) && !isNaN(y) ) {

        x += 10;
        y -= 30;

        x = Math.max( 0, Math.min( maxX, x ) );
        y = Math.max( 0, Math.min( maxY, y ) );

        if( pageY < limitY ) {
            y = limitY;
        }

        $elem.css({ left: x, top: y });
    }
});