Question

If you look here: http://dev.driz.co.uk/tips/ You will see I am experimenting with some Facebook ripoff tooltips.

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 position() 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.

If someone can provide some examples that’d be awesome.

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.

Can anyone help?
Thanks

Answer 1

var top = $("#link").offset().top;
top += $("#link").height();
var left = $("#link").offset().left;
$("#tip").css({
    top: top+"px",
    left: left + "px"
});

This code positions #tip relative to the #link. It’s very likely that you want to show #tip below #link, hence top += $("#link").height();.