Use jQuery to position element relative to another that is not the parent
<p>If you look here: <a href="http://dev.driz.co.uk/tips/" rel="nofollow">http://dev.driz.co.uk/tips/</a> You will see I am experimenting with some Facebook ripoff tooltips.</p>

<p>What I'm trying to learn is how to position the tip relative to another object. So for example if a user hovered the red box it would show the relevant tooltip but in relation to the object with the arrow pointing at the redbox. I've thought about using the outerWidth and height or even the <code>position()</code> method. but not sure how I would use it. Also need to position the arrow in relation as well such as where on the box and move it up and down if the user scrolls the page ie. moves the element.</p>

<p>If someone can provide some examples that'd be awesome.</p>

<p><strong>NOTE I'm not trying to do the hover bit at the moment just trying to get the tip to position itself in relation to the other object.</strong></p>

<p>Can anyone help?
Thanks</p>
