自定义 jQuery 工具提示:如何定位它? [英] Custom jQuery Tooltip: How to position it?

问题描述

我有一个由 Ajax 拉取的自定义工具提示，当您滚动链接时，很棒...例如

所以这显示了 div... "tooltip-container"但我认为我需要一些进一步的 jQuery 帮助来实际定位每个元素旁边的工具提示.由于 CSS 没有这样做......因为它会动态地需要悬停在每个工具提示链接上.

所以基本上 html 是:

 <a href="#tip1" class="tippytrip">显示提示 1</a><br/><a href="#tip2" class="tippytrip">显示提示 2</a><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><a href="#tip1" class="tippytrip">显示提示 1 - 再次</a><div id="工具提示容器"></div>

然后在 tooltips.html 中我有:

<h1>你好！</h1>
<div id="tip2"><h1>Tip 2先生</h1>

解决方案

1. 使用 jQuery 的 .offset() 方法获取 .tippytrip 链接相对于整个页面的左侧和顶部位置.
2. 将 #tooltip-container 完全放在任何其他元素之外(当然除了 body)，并使用来自 # 的位置数据绝对定位它1 以正确定位.

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

这是JS代码.很简单:

$('.tippytrip').hover(function(){var offset = $(this).offset();控制台日志(偏移量)var width = $(this).outerWidth();$('#tooltip-container').css({top:offset.top, left:offset.left + width + 10}).show();}， 功能(){$('#tooltip-container').hide();});

我建议使用 .offset() + "outside of any other element" 组合，因为替代方案是:

1. 使用 .position()，它给出元素与其最近的相对定位父元素的偏移量.
2. 将工具提示放在与链接相同的父元素中.这是必要的，以便您从 #1 获得的值相对于相同的元素应用.

问题在于，仅仅重新定位工具提示是不够的.每次相关链接的相关父级发生变化时，您还必须将其插入到 DOM 的不同部分.

I've got a custom tooltip being pulled by Ajax, when you rollover a link, great...e.g.

<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>

So this shows the div... "tooltip-container" But I think i'll need some further jQuery assistance in actually positioning the tooltip next to each element. As CSS isn't doing it...as it would dynamically need to be for each tooltip link hovered over.

So basically html is:

    <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>

And then within tooltips.html I have:

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

解决方案

1. Use jQuery's .offset() method to get the left and top positions of the .tippytrip link relative to the entire page.
2. Place the #tooltip-container completely outside of any other element (other than the body, of course), and position it absolutely, using the position data from #1 to position it correctly.

An example: http://jsfiddle.net/5LSxG/

And here's the JS code. Pretty simple:

$('.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();
});

I recommend going with the .offset() + "outside of any other element" combination because the alternative would be:

1. Use .position(), which gives the elements offset from its nearest relatively positioned parent.
2. Place the tooltip within the same parent element as the link. This is necessary so that the values you get from #1 are applied relative to the same element.

The problem with this is that simply re-positioning the tooltip wouldn't be enough. You'd also have to insert it into a different part of the DOM each time the relative parent of the link in question changes.

这篇关于自定义 jQuery 工具提示:如何定位它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！