懸停時的對話框檢查是否在屏幕上可見

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

懸停時的對話框檢查是否在屏幕上可見

回答

相關問題