JQuery - держать подсказку в поле зрения

Question

Кажется, я смог достичь этого по вертикали, но я не могу заставить горизонтальный переворот работать.

$("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");
});

Answer 1

Я не совсем слежу за вашим кодом, но вот фрагмент из другого проекта, который может помочь. Вы можете настроить значения x, y и limitY, чтобы они соответствовали вашему дизайну.

$('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 });
    }
});