Question

我的HTML页面就像这样..

<a id="profile" href="#">Over Me to Show</a>
<div id="profile-view">
<span>Loading profile details...</span>

我的Jquery喜欢这个。

function ProfileView(){
            var height = 18;
            var left = 10;
            var Position = $('#profile').position();
            var SetPos = {
              top:(Position.top + height) + 'px',
              left:(Position.left + left) + 'px' 
            };
            $('#profile-view').css(SetPos);
            $('#profile-view').show();
        }
        $(document).ready(function(){
           $('#profile').mousemove(function(){
              ProfileView();
           });
        });

当我将光标移动到链接上（在我上面显示）时，＃profile-view div应显示。它的工作正常，这个div总是显示在链接的底部..
我需要div（#profile-view）全高或宽度不能显示在链接下面如果它溢出它应该显示在链接上方或右边或左边可用空间显示div中的所有内容。

我不知道如何在科技术语中提出这个问题。如果有什么不对的话，请忘记。

Answer 1

您应该获得鼠标位置并将此值增加或减少到良好位置：

$(document).ready(function(){
   $('#profile').mouseover(function(event){
        var x = event.clientX;
        var y = event.clientY; 
        ProfileView(x, y);
   }).mouseout(function() {
            $('#profile-view').hide();
   })
});

function ProfileView(x, y){

            var height = 18;
            var left = 10;            
            var SetPos = {
              position : 'absolute',
              top: (x + height) + 'px',
              left: (y + left) + 'px' 
            };
            $('#profile-view').css(SetPos);
            $('#profile-view').show();
}

Answer 2

最后我得到了以下链接相关的解决方案.. Demo Link

Source Code

根据可用的页面空间弹出div位置

2 个答案: