画面上にホバーが表示されているかどうかを確認するダイアログ

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

これはイベントのホバーです。私がイベントにマウスポインタを置くと、マウスポインタの横に常にある余分な部分が表示されます。私の問題は、イベントがスクリーン上で低すぎるため、ツールチップが表示されないイベントをホバーすると、イベントが画面の最下部にあるときです。私は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))) 

第1常にtrueを返却するexpected.whenとして機能していないではない、常に二つ目ながら、ツールチップが表示されているか、いない場合でも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); 

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 - ツールチップの>高さ
• $（ウィンドウ）.height（） - >ウィンドウの高さ