.NET Answers

If you’ve ever needed to write a pop-up layer or a tooltip that needed to be positioned on the screen at a specific location, you know how hard it is to do this in such a way that it works on every browser.

You also realize that every time a new browser comes out, this code needs to be tweaked.  I remember back in 2000 when I had to get a pop-up working that had been working because a new round of browser versions had just come out.  It wasn’t fun.

With jQuery, all that changes.  At least, the initial code development is much easier.  And when the new browsers come out, getting it to work again is a problem for the jQuery developers to solve.  Not us.

To position a tooltip or layer, there are several tasks we need to accomplish.  I’ll refer to tooltip through the rest of this article, but the steps would be similar for a layer.

First, we need to determine the position of the element the mouse is over.  We can do this with the offset method, which returns a point:

eleOffset = $(this).offset();

notice the $(this) statement.  This is because the code this came from was an event handler and the element we are over is what got passed into the event handler.

Once we have the offset, we can get the left and top positions using:

eleOffset.left;
eleOffset.top;

We will also want to retrieve the width and height of the tooltip once we’ve added our information to it.  This is because we are going to place the tooltip over the element and if we want to center it, we’ll need the actual size of the tooltip to do this correctly.

So once you’ve retrieved the element, you can get the height and width using the height() and width() methods.  BTW, you can also use this method to set the height and width by passing an integer in as a parameter to each method:

$(this).width();
$(this).height();

Last, we’ll need to position the tooltip.  You can easily do this by using the CSS method.  This method takes two parameters: the CSS property you want to change and the value you want to change it to.  To change the left position of an element, you would use:

element.css('left', 200);

and to change the top position:

element.css('top', 200);

of course, where we’ve put 200, you’ll want to put a computed value.

If you’ve ever written or maintained a tooltip, you immediately recognize just how much easier this is.