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