如何在元素附近的适当位置显示小费？ [英] How to show a tip on a proper position near the element?

问题描述

我在页面上有以下div：

 < div id =tip> 
在这里提示文字... 
< / div> 
  

以下内容：

 < div class =element> 
元素文字在这里... 
< / div> 
  

同样遵循js-code：

 $（document）.ready（function（）{
 $（'。element'）。hover（function（）{
 $（'＃tip'）。 css（'top'，$（'。element'）。position（）。top）; 
 $（'＃tip'）。css（'left'，$（'。element'）。position（） .deft）; 
 $（'＃tip'）。fadeIn（）; 
}，function（）{
 $（'＃tip'）。fadeOut（）; 
 }）; 
}）; 
  

它显示页面左上角的提示。我如何修复此代码以显示与元素位置相同的提示？ （我不能将tip和element放在代码旁边）。

非常感谢您的帮助！

解决方案

.position相对于父级，请尝试.offset，与文档相关

I have the following div on the page:

<div id="tip">
  Tip text here...
</div>

And the following one:

 <div class="element">
   Element text here...
 </div>

Also following js-code:

$(document).ready(function() {
    $('.element').hover(function() {
        $('#tip').css('top', $('.element').position().top);
        $('#tip').css('left', $('.element').position().left);
        $('#tip').fadeIn();
    }, function() {
        $('#tip').fadeOut();
    });
});

It shows tip on left top corner of the page. How do I fix this code to show tip on the same position as of the element? (I can't place tip and element near each other on the code.)

Thanks a lot for the help!

解决方案

.position is relative to the parent, try .offset, who is relative to the document

这篇关于如何在元素附近的适当位置显示小费？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！