Question

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>

Answer 1

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.