自定义jQuery工具提示：如何定位它？

我有一个自定义的工具提示被Ajax拉出来，当你滚动一个链接时，很好…例如

<script type="text/javascript">
$(document).ready(function(){
$('.tippytrip').hover(function(){
    var tooltipId = this.hash; 
    $('#tooltip-container').empty().load('tooltips.html ' + tooltipId).show();
}, function(){
    $('#tooltip-container').hide();
});});
</script>

$（文档）.ready（函数（）{
$（'.tippytrip'）。悬停（函数（）{
var tooltipId=this.hash；
$（“#工具提示容器”）.empty（）.load（'tooltips.html'+tooltipId.show（）；
}，函数（）{
$（“#工具提示容器”）.hide（）；
});});

所以这显示了div。。。“工具提示容器” 但是我认为我需要一些jQuery的进一步帮助来实际定位每个元素旁边的工具提示。因为CSS并没有这样做…因为它将动态地需要为每个悬停在上面的工具提示链接

所以html基本上是：

    <a href="#tip1" class="tippytrip">Show Tip 1</a><br />
    <a href="#tip2" class="tippytrip">Show Tip 2</a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <a href="#tip1" class="tippytrip">Show Tip 1 - again</a>

<div id="tooltip-container"></div>

然后在tooltips.html中我有：

<div id="tip1">
    <h1>Hello there!</h1>
</div>
 <div id="tip2">
    <h1>Mr Tip 2</h1>
</div>

你好！
Tip先生2

您可能希望查看现有的jQuery工具提示插件及其源代码，了解它们是如何实现的。我们使用的是运行良好且具有（请注意，此演示的设置要求您单击而不是悬停以显示工具提示）。

您可能需要查看现有的jQuery工具提示插件及其源代码，以了解它们是如何做到这一点的。我们使用的是工作良好且具有的（请注意，此演示的设置要求您单击而不是悬停以显示工具提示）。

您必须在工具提示容器元素上设置CSS属性

position:absolute

---

工具提示容器元素的确切位置取决于

top

和

left

CSS属性的值（或在

bottom

和

right

上，或四个属性的任何其他组合）。这些值应根据当前悬停项的位置计算。

您必须在工具提示容器元素上设置CSS属性

position:absolute

工具提示容器元素的确切位置取决于

top

和

left

CSS属性的值（或在

bottom

和

right

上，或四个属性的任何其他组合）。这些值应根据当前悬停项的位置计算

使用jQuery的

.offset（）

方法获取

.tippytrip

链接相对于整个页面的左侧和顶部位置

将

#工具提示容器

完全置于任何其他元素之外（当然，除了

主体

），并使用#1中的位置数据对其进行绝对定位，以正确定位

例如：

这是JS代码。非常简单：

$('.tippytrip').hover(function(){
    var offset = $(this).offset();
    console.log(offset)
    var width = $(this).outerWidth();
    $('#tooltip-container').css({top:offset.top, left:offset.left + width + 10}).show();
}, function(){
    $('#tooltip-container').hide();
});

我建议使用

.offset（）

+“任何其他元素之外”组合，因为备选方案是：

使用

.position（）

，它将给出元素相对于最近的相对位置父元素的偏移量

将工具提示放置在与链接相同的父元素中。这是必要的，以便从#1获得的值相对于同一元素应用

问题是仅仅重新定位工具提示是不够的。每次相关链接的相对父级更改时，您还必须将其插入DOM的不同部分

使用jQuery的

.offset（）

方法获取

.tippytrip

链接相对于整个页面的左侧和顶部位置

将

#工具提示容器

完全置于任何其他元素之外（当然，除了

主体

），并使用#1中的位置数据对其进行绝对定位，以正确定位

例如：

这是JS代码。非常简单：

$('.tippytrip').hover(function(){
    var offset = $(this).offset();
    console.log(offset)
    var width = $(this).outerWidth();
    $('#tooltip-container').css({top:offset.top, left:offset.left + width + 10}).show();
}, function(){
    $('#tooltip-container').hide();
});

我建议使用

.offset（）

+“任何其他元素之外”组合，因为备选方案是：

使用

.position（）

，它将给出元素相对于最近的相对位置父元素的偏移量

将工具提示放置在与链接相同的父元素中。这是必要的，以便从#1获得的值相对于同一元素应用

---

问题是仅仅重新定位工具提示是不够的。每次相关链接的相对父级发生更改时，您还必须将其插入DOM的不同部分。

您应该使用以下内容将工具提示容器附加到tippyrtrip元素：

.appendTo()

<script type="text/javascript"> 
$(document).ready(function(){ 
$('.tippytrip').hover(function(){ 
    var tooltipId = this.hash;  
    $('#tooltip-container').empty().load('tooltips.html ' + tooltipId).show().appendTo($(this)); 
}, function(){ 
    $('#tooltip-container').hide(); 
});}); 
</script> 

.appendTo（）
$（文档）.ready（函数（）{
$（'.tippytrip'）.hover（函数（）{
var tooltipId=this.hash；
$（'#tooltip container'）.empty（）.load（'tooltips.html'+tooltipId.show（）.appendTo（$（this））；
}，函数（）{
$（“#工具提示容器”）.hide（）；
});}); 

您应该将工具提示容器附加到tippyrtrip元素，并带有：

.appendTo()

<script type="text/javascript"> 
$(document).ready(function(){ 
$('.tippytrip').hover(function(){ 
    var tooltipId = this.hash;  
    $('#tooltip-container').empty().load('tooltips.html ' + tooltipId).show().appendTo($(this)); 
}, function(){ 
    $('#tooltip-container').hide(); 
});}); 
</script> 

.appendTo（）
$（文档）.ready（函数（）{
$（'.tippytrip'）.hover（函数（）{
var tooltipId=this.hash；
$（'#tooltip container'）.empty（）.load（'tooltips.html'+tooltipId.show（）.appendTo（$（this））；
}，函数（）{
$（“#工具提示容器”）.hide（）；
});}); 

你能给我们展示一些CSS/HTML吗？您完全可以将工具提示定位到其父级，该父级具有

位置：relative

。使用绝对位置，您可以修改工具提示框相对于父项的顶部、底部、右侧或左侧位置？您完全可以将工具提示定位到其父级，该父级具有

位置：relative

。使用绝对位置，您可以修改工具提示框相对于父项的顶部、底部、右侧或左侧位置。这不起作用…因为仅使用css会在相同位置显示提示…而不是在您悬停的每个链接旁边？他说的是在通过JS“计算”了“当前悬停项”的值之后，通过JS设置值。这基本上也是我的答案所说的，只是用更少的词：）这不起作用……因为仅仅使用css就可以显示ti