悬停时的对话框检查是否在屏幕上可见

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

但两者都无法正常运转的expected.when我做

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

第一个总是返回true即使提示是可见或不可见，而第二个总返回false即使提示是可见的还是不

当tootip的部分是不可见的或在屏幕上我想是

使用

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

这样的提示将出现在鼠标指针其他

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

来源

2016-04-26 Brownman Revival

可以提供小提琴？ – Atula

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 - >高度提示的
$（窗口）.height（） - >窗口高度

来源

2016-04-26 06:37:13 guradio

悬停时的对话框检查是否在屏幕上可见

回答

相关问题