Custom jQuery Tooltip: How to position it?

问题

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

Use .position(), which gives the elements offset from its nearest relatively positioned parent.
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.

回答2:

You might want to look into the existing jQuery tooltip plugins and their source to see how they do it. We use qTip which works well and has AJAX support (note that this demo is set-up to require you to click rather than hover to show the tooltip).

回答3:

You have to set the CSS property position: absolute on your tooltip container element.

The exact position for the tooltip container element depends on the values for top and left CSS properties (or on bottom and right, or on any other combination of the four properties). These values should be computed from the position of the currently hovered item.

回答4:

You should append the tooltip-container to tippyrtrip element with:

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

来源：https://stackoverflow.com/questions/9111869/custom-jquery-tooltip-how-to-position-it

标签

jquery