Custom jQuery Tooltip: How to position it?
<p>I've got a custom tooltip being pulled by Ajax, when you rollover a link, great...e.g.</p>

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

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

<p>So basically html is:</p>

<pre><code>    &lt;a href="#tip1" class="tippytrip"&gt;Show Tip 1&lt;/a&gt;&lt;br /&gt;
    &lt;a href="#tip2" class="tippytrip"&gt;Show Tip 2&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
    &lt;a href="#tip1" class="tippytrip"&gt;Show Tip 1 - again&lt;/a&gt;

&lt;div id="tooltip-container"&gt;&lt;/div&gt;
</code></pre>

<p>And then within tooltips.html I have:</p>

<pre><code>&lt;div id="tip1"&gt;
    &lt;h1&gt;Hello there!&lt;/h1&gt;
&lt;/div&gt;
 &lt;div id="tip2"&gt;
    &lt;h1&gt;Mr Tip 2&lt;/h1&gt;
&lt;/div&gt;
</code></pre>
