相對於父母的位置工具提示

我有以下代碼;相對於父母的位置工具提示

var posLeft = 170; 
var posDown = e.pageY; 

    $(this).next().css({'top':posDown, 'left':posLeft, 'position':'absolute'}).toggleClass('is-hidden'); 
});

和HTML

<tr> 
    <td><a href="#">123</a> 
     <div class="pop-up is-hidden"> 
      <p>Type:<span>Code</span></p> 
      <p>Number:<span>123</span></p> 
      <p>Status:<span>Valid</span></p> 
      <p>Sold In:<span>August</span></p> 
      <p>Uploaded:<span>20/09/2012 10:34</span></p> 
     </div> 
    </td> 
    <td>Code</td> 
    <td>Valid</td> 
    <td>Device is active</td> 
</tr>

jQuery的顯示上懸停.pop-up格，我的問題是與.pop-up的垂直位置。它正確地坐在左邊，但是垂直位置已經不存在了。我認爲使用pageY是相對於文檔定位div的時候，我希望它被定位在錨點上。

表格沒有應用任何定位，所以我需要獲得.pop-up出現在正確位置的最佳方法。

在此先感謝。

來源

2012-12-07 webworker

你的意思是這樣FIDDLE？

$("a.tooltip").mouseenter(function(e) { 
    tooltip = $(this).parent().find(".is-hidden"); 
    tooltip 
     .css("top",(e.pageY) + "px") 
     .css("z-index","200002") 
     .css("left",(e.pageX) + "px"); 

    tooltip.show(); 
}).mouseleave(function(e) { 
    tooltip = $(this).parent().find(".is-hidden"); 
    tooltip.hide(); 
});

來源

2012-12-07 09:51:08 SubRed

嘗試在被點擊的元素上使用jquery position method。

例如var posDown = $(this).position().top

這應該給你正確的位置。

編輯 - 這裏是一個非常相似的小提琴SubRed但使用position()和高度屬性來定位提示http://jsfiddle.net/FUS27/

來源

2012-12-07 09:32:06

這是更緊密的定位，但它仍然低於我的意願。 – webworker

用小提琴鏈接檢查我的編輯，如果需要也可以將元素的寬度添加到'left' –

相對於父母的位置工具提示

回答

相關問題