Ajax PHP Jquery HoverCard定位

Question

朋友你好。 这是 DEMO 页面

正如您在图片中看到的，当我将页面顶部用户1悬停时，hovercard正常工作。但是，如果我向下滚动以悬停user5或user6，那么用户名旁边没有显示悬浮卡，它会像图像一样向上滑动。

我正在使用以下jQuery代码进行定位。

function showProfileTooltip(e, id){
			var top = e.clientY + 20;
			var left = e.clientX - 10;

			$('.p-tooltip').css({
				'top':top,
				'left':left
			}).show();
			//send id & get info from get_profile.php
			$.ajax({
				url: 'get_profile.php?uid='+id,
				beforeSend: function(){
					$('.p-tooltip').html('Loading..');
				},
				success: function(html){
					$('.p-tooltip').html(html);
				}
			});
		}

		function hideProfileTooltip(){
			$('.p-tooltip').hide();
		}

		$('.profile').mouseover(function(e){
			var id = $(this).attr('data-id');
			showProfileTooltip(e, id);
		});

		$('.p-tooltip').mouseleave(function(){
			hideProfileTooltip();
		});
	});

.p-tooltip{
		background: #fafbfb;
border: 1px solid #BFBFBF;
width: 320px;
margin: 0 auto;
border-radius: 5px;
position: absolute;
display: none;
padding: 0 0 10px 0;
	}
	.p-tooltip-cover img{
		width: 100%;
		height: 120px;
	}
	.p-tooltip-avatar{
		text-align: left;
		margin-top: -45px;
		margin-left: 10px;
	}
	.p-tooltip-avatar img{
		height: 75px;
		width: 75px;
		padding: 4px;
		background: #fff;
		border: 1px solid #ccc;
		cursor: pointer;
	}
	.p-tooltip-info{
		text-align: left;
	}
	.p-tooltip-info .p-username{
float: none;
margin-top: -70px;
margin-left: 100px;
font-size: 14px;
font-weight: bold;
color: white;
	}
	.p-tooltip-info .p-headline{
		float: none;
margin-top: 6px;
margin-left: 100px;
font-size: 12px;
color: black;
	}
	.p-tooltip-button{
		float: right;
		margin-top: 5px;
	}
	.p-tooltip-button button{
		cursor: pointer;
	}

<div class="p-tooltip"></div>
<table cellpadding="20">
<td><a href="#" class="profile" data-id="25">user1</a></td>
		<tr>
		<td><a href="#" class="profile" data-id="26">user2</a></td>
		<tr>
		<td><a href="#" class="profile" data-id="27">user3</a></td>
		<tr>
		<td><a href="#" class="profile" data-id="28">user4</a></td>
		<tr>
		<td><a href="#" class="profile" data-id="29">user5</a></td>
		<tr>
		<td><a href="#" class="profile" data-id="30">user6</a></td>
		<tr>
		<td><a href="#" class="profile" data-id="31">user7</a></td>
		<tr>
		<td><a href="#" class="profile" data-id="32">user8</a></td>
		<tr>
</table>

Answer 1

而不是使用.e.clientY和e.clientX来定位元素的位置，您只需使用.position()

在mouseover事件中，$(this)传递给showProfileTooltip函数而不是事件（e）：

$('.profile').mouseover(function(e){
    var id = $(this).attr('data-id');
    showProfileTooltip($(this), id); //pass '$(this)' instead
});

然后在showProfileTooltip函数中，您可以使用以下命令找到顶部和左侧：

var top = e.position().top;
var left = e.position().left+50; //add whatever number you want to offset the positioning