Question

当你翻转一个链接时，我有一个由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>

所以这显示了div ...“tooltip-container” 但我认为我需要一些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>

Answer 1

使用jQuery的.offset()方法获取.tippytrip链接相对于整个页面的左侧和顶部位置。
将#tooltip-container完全置于任何其他元素之外（当然不是body），并使用＃1中的位置数据将其正确定位。

示例：http://jsfiddle.net/5LSxG/

这是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的不同部分。

Answer 2

您可能希望查看现有的jQuery工具提示插件及其来源，以了解它们是如何做到的。我们使用qTip效果很好且有AJAX support（请注意，此演示设置为要求您点击而不是悬停以显示工具提示。）

Answer 3

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

工具提示容器元素的确切位置取决于top和left CSS属性（或bottom和right的值，或任何其他组合四个属性）。应根据当前悬停项目的位置计算这些值。

Answer 4

您应该使用以下命令将tooltip-container附加到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>

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

4 个答案: