悬停时的工具提示位置

Question

我在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;
}

问题在于，如果图像太靠近浏览器的一侧，则会在此处显示：

我尝试过正确的位置，但没有运气......有人可以帮我解决这个问题吗？

Answer 1

这是我用来保持元素的顶部和底部在浏览器的可视区域内的东西 - 在我的例子中，我不必担心处理元素的左/右坐标，但下面的代码可能是调整以处理它。

该函数将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));
}