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:
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:
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:
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.
Other post in jQuery
- jQuery - The Man, The Myth, The Legend - October 8th, 2008
- Getting started with jQuery and ASP.NET - October 15th, 2008
- jQuery Simple Selectors - October 28th, 2008
- jQuery Selectors - Looks just like CSS - November 6th, 2008
- jQuery Looks like XPath - November 12th, 2008
- jQuery - class manipulation - November 19th, 2008
- jQuery - Positioning Elements - January 6th, 2009
- jQuery GUI - Drag - February 3rd, 2009
- jQuery - Drop - February 12th, 2009
- jQuery UI - Resizable w/ ASP.NET Themes - February 18th, 2009
- jQuery, bgiframe and IE6 z-order hacks - February 19th, 2009
- jQuery - Sliders (scrollbars to the rest of us) - March 4th, 2009
- jQuery - Using Slider as a Scrollbar - March 12th, 2009
- jQuery - Auto Scrolling the Slider - March 23rd, 2009
- jQuery – Accordion - May 6th, 2009
- CustomValidationControl and jQuery - May 11th, 2009
- Mixing ASP.NET, jQuery and JSON - May 12th, 2009
- jQuery Progressbar - May 20th, 2009
- jQuery – Dialog - June 2nd, 2009
- jQuery Dialog – With Validation Controls - June 25th, 2009
- jQuery – Date Picker - July 2nd, 2009
- jQuery Splitter - July 21st, 2009
- jQuery, Each() and Async Gets - December 2nd, 2009
- jQuery and ASP.NET UpdatePanel - January 6th, 2010
- jQuery - Creating Plug-ins - June 4th, 2012
- jQuery - Calling Your Own Functions - July 24th, 2012
- jQuery Tabs - October 2nd, 2012
- jQuery - Explaining Last Week's Code - October 16th, 2012
- jQuery – Modal Dialog - November 20th, 2012
- Host jQuery at Google (with Intellisense support) - December 4th, 2012
- JQuery, Cufon, and Dynamic Content - January 1st, 2013
- jQuery - Loading Partial Content - January 29th, 2013
- jQuery, JSON, and ASP.NET - September 4th, 2013
- jQuery Expand/Collapse Using Head Tags - September 25th, 2013
- jQuery - Events - November 6th, 2013
- jQuery - Retrieving HTML Fragments - November 20th, 2013