懸停時的工具提示位置

我有簡單的圖片預覽hover。懸停時的工具提示位置

jQuery的

jQuery('img').hover(
    function(){ 
     jQuery('body').append('<div id="image_preview"><img src="'+ jQuery(this).attr('src') +'" alt="Image preview" /></div>'); 
     jQuery('.camera_info img').mousemove(
      function(event){ 
       jQuery('#image_preview').css('top', (event.pageY - 10) + 'px').css('left', (event.pageX + 30) + 'px').fadeIn('normal'); 
      } 
     ); 
    }, 
    function(){ 
     jQuery('#image_preview').remove(); 
    } 
);

CSS：

#image_preview { 
    border: 1px solid #CCCCCC; 
    display: none; 
    padding: 5px; 
    position: absolute; 
}

的問題是，如果圖像是太靠近瀏覽器的側面就說明後，喜歡這裏：

我試圖玩正確的位置，但沒有運氣......有人可以幫我解決這個問題嗎？

來源

2013-01-22 Kin

你究竟想要發生什麼？ –

重新發明車輪毫無意義;使用[qtip2]（http://craigsworks.com/projects/qtip2/），問題解決了。 –

@RoryMcCrossan如果他們在你已經鏈接的頁面上使用他們自己的插件，它不會處理OP的問題：（。 – Teemu

這是我用來保持元素的頂部和底部在瀏覽器的可視區域內的東西 - 在我的情況下，我不必擔心處理元素的左/右座標，但下面的代碼可以進行調整以處理這個問題。

該函數將HTMLElement作爲參數，即返回值爲$('#someid').get(0)或document.getElementById('someid')並始終使用jQuery。

function moveIntoView (elem) 
{ 
    var w$ = $(window), 
     elem$ = $(elem), 
     docViewTop = w$.scrollTop(), 
     docViewBottom = docViewTop + w$.height(), 
     elTop = elem$.offset().top, 
     elBottom = elTop + elem$.height(); 
    // element top is lower than top of document in view 
    // and element bottom is higher than bottom of document in view, so nothing to do 
    if(((docViewTop <= elTop) && (docViewBottom >= elBottom))) 
     return; 

    elem$.css("top", parseInt(elem$.css("top")) - (elBottom - docViewBottom)); 
}

來源

2013-01-22 15:28:31 mrk

懸停時的工具提示位置

回答

相關問題