jquery - 悬停对话框检查屏幕上是否可见

Question

eventMouseover: function(calEvent, jsEvent) {
    //console.log($(this).find('.fc-content').text());
    //console.log(JSON.stringify(calEvent));
    //var data = JSON.stringify(calEvent);
    //console.log(JSON.parse(data)['start']);
    //console.log(JSON.parse(data)['end']);
    var exResult = dataFromTimestamp(calEvent.start * 1000)
        //console.log(exResult.fullDate+' '+exResult.fullTime);
    var tooltip = '<div class="tooltipevent" style="padding:3px;width:250px;height:150px;background:#ccc;position:absolute;z-index:10001;">Description:<br>' + calEvent.description + '<hr>Other Information:<br>' + calEvent.otherinformation + '</div>'; //'<hr>Start Time:' + JSON.parse(data)['start'] + '<hr>End Time:' + JSON.parse(data)['end'] +
    $("body").append(tooltip);
    $(this).mouseover(function(e) {
        $(this).css('z-index', 10000);
        $('.tooltipevent').fadeIn('500');
        $('.tooltipevent').fadeTo('10', 1.9);
    }).mousemove(function(e) {
        //                var x = $(this).position().left + $(this).outerWidth();
        //                var y = $(this).position().top - $(document).scrollTop();
        $('.tooltipevent').css('top', e.pageY + 10);
        //                $('.tooltipevent').css('left', e.pageX + 20);
        //                    $('.tooltipevent').css('top', e.pageY -150);
        $('.tooltipevent').css('left', e.pageX + 20);
        //console.log(View($('.tooltipevent')));
        console.log(elementInViewport($('.tooltipevent').css('top', e.pageY + 10)))
    });
}

这是我的悬停事件。当我将鼠标悬停在事件上时，我会显示一个始终位于鼠标指针旁边的 tooptip。我的问题是，当您将鼠标悬停在事件位于屏幕底部时，工具提示不可见，因为它在屏幕上太低了。我尝试了很多功能作为 ff:

function View(elem) {
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    //    var elemTop = $elem.offset().top;
    //    var elemBottom = elemTop + $elem.height();

    var elemTop = $(elem).position().top
    var elemBottom = $(elem).outerHeight(true)
        //For elemTop I used $(elem).position().top and for elemBottom I used elemTop + $(elem).outerHeight(true)


    //    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    return (((elemTop >= docViewTop) && (elemTop <= docViewBottom)) || ((elemBottom >= docViewTop) && (elemBottom <= docViewBottom)));
}

function elementInViewport(el) {
    var top = el.offsetTop;
    var left = el.offsetLeft;
    var width = el.offsetWidth;
    var height = el.offsetHeight;

    while (el.offsetParent) {
        el = el.offsetParent;
        top += el.offsetTop;
        left += el.offsetLeft;
    }

    return (
        top >= window.pageYOffset &&
        left >= window.pageXOffset &&
        (top + height) <= (window.pageYOffset + window.innerHeight) &&
        (left + width) <= (window.pageXOffset + window.innerWidth)
    );
}

但两者都没有按预期工作。当我这样做时

console.log(View($('.tooltipevent')));
console.log(elementInViewport($('.tooltipevent').css('top', e.pageY + 10)))

第一个始终返回 true，无论工具提示是否可见，而第二个始终返回 false，无论工具提示是否可见

我想要的是当提示的一部分不可见或在屏幕上时

使用

$('.tooltipevent').css('top', e.pageY - 150);
$('.tooltipevent').css('left', e.pageX + 20);

这样工具提示就会出现在鼠标指针的顶部

$('.tooltipevent').css('top', e.pageY + 10);
$('.tooltipevent').css('left', e.pageX + 20);

Answer 1

if (e.pageY + 150 > $(window).height()) {
    $('.tooltipevent').css('left', e.pageX + 20);
    $('.tooltipevent').css('top', e.pageY - 150);
} else {
    $('.tooltipevent').css('top', e.pageY + 10);
    $('.tooltipevent').css('left', e.pageX + 20);
}

使用 e.pageY + 150 > $(window).height() 检查对话框是否在屏幕上。

• e.pageY -> 事件的位置。
• 150 -> 工具提示的高度
• $(window).height() -> 窗口高度