I have modified the java script to make a spry tool tip position from the top left of my page. I need it to be placed from a position defined from the top left of a div instead so it always displays in the same spot regardless of the screen or browser size. Any ideas? this is what I changed to get the default positioning from the cursor position:

2. Absolute positioning works first by removing the element from the normal flow (so that it will be positioned absolutely, regardless of what else is happening on the page), and then by locating the element visually according it its offsets. The offsets themselves are applied to one of two potential zero points: either the upper, left-hand corner of the page, or the location of the nearest positioned ancestor container. It's the latter situation that will give you exactly what you want. All you need is a positioned ancestor container.

To say "a positioned ancestor container" is a little vague. What it means is this - there is some PARENT element (i.e., the absolutely positioned element is the child of some other element) that is also positioned. When this is the case, the offets of your absolutely positioned item will apply using the PARENT element's location (i.e., upper, left-hand corner) as a zero point. As a result of this interplay between parent and child positioned elements, many developers will normally always 'wrap' the entire page in a positioned div container. This gives a useful zero point to every other positioned element on the page.

So, should the parent container be absolutely positioned? Not if your page is a centering one! In fact, that uber-parent container probably should always be position:RELATIVE. Why? Because position:relative allows the container to qualify as a positioned element, yet it does not affect where it is placed in the normal flow of the page (as opposed to position:absolute) which removes the element from the normal flow.

This arrangement will allow you page to center as desired, and as that parent container centers, the zero point for all child absolutely positioned elements also moves as the page centers - the net result is that the absolutely positioned element always sits where you want it to with regard to everything else on the page, no matter what width or height your browser viewport is.

To see if this is going to work, you can take a shortcut. Change this code -

You have now given the tooltip div a relatively positioned parent. Of course, you will also now have to adjust the top and left offsets to get the tooltip to sit where you want, but this should work fine. Let us know if it doesn't.

A more suitable approach would be to add a relatively positioned wrapper around the whole page so that you could locate ALL tooltips as desired. You already have a wrapper (div#container). What would you need to do to it?

I am not sure the above works. I added the div with the relative position and it doesn't seem to change anything. I need the reference point for the tool tip position to be deteremined by the 0,0 of the <div id="forkLiftEquipment"> container. What I am after is having a different tool tip like the one you see, for a hover over each of the 5 pieces of equipment that displays in the center area covering the "We have Over 330..." text. Should I make the container div relative positioned and remove the new div you suggested above? I uploaded the file with the new div on the tooltip - http://fallswayrents.com/indexHover.html

Once you have the relatively positioned container wrapping EVERYTHING on the page, then all absolute positioning will use the location of that wrapper as its zero coordinate. You would have to adjust your absolute positioning offsets so that the absolute elements are properly positioned, but once set everything should work just fine.

I see what your problem is. Try MOVING that new relatively positioned div and its contents INSIDE the <div id="container"> and see if that helps - you will probably need to adjust the offsets once again. Alternatively, give the relatively positioned div the same width and margins as #container, and see what happens -

Thanks Murray but I am really lost now. I may have my code complety goofed up now. I changed the location of the tooltip div to just inside the container div and didn't work. Put it inside the div holding the 5 images and still no change. I believe the problem may be that the javascript is positioning the tool tip. Is that possible and is over riding every css change I make? I barely can hack through javascript. But I am wondering if the div I want the tool tip to be positioned off of needs to be declared in the javascript somewhere (SpryTooltip.js file)?

Taking a closer look at your page and its code, I have to say - thing there are a big mess. You have absolutely positioned and floated elements all over the place. Combine that with your effort to make the page responsive makes this very very difficult to work with. I sure wouldn't do that page that way.

Notwithstanding that, I'll try to get you back to where you want to be with the tooltips. And by the way, only about the first 150 characters - or 4 to 8 keywords - of your meta keywords are read by search engines (that is those that read them at all - most don't, including Google). It will take me a bit to get my head around what you can do to fix this layout, however.... Are you *sure* you want to continue down this path?

I am aware of the meta keywords character count but sometimes I do it to make a client happy! I wont take any offense to your suggestions about my page structure. I may have it in worse shape than I started out with after trying to position that tool tip. If you would make suggestions on how I could better place my page elements I will eagerly read them! The text on the left side is just hanging out after the first build of the page and will be heavily re-done after the tooltip issue is settled. This may be the most complex thing I have attempted so I really appreciate your willingness to help me out here. The basic concept was one the client saw on another site and I discovered it was accomplished using flash. I wont use flash for SEO reasons and never took the time to learn it after I found out some good reasons not to use it on sites.

By the way, I originally planned to use a hover state to reveal a hidden div placed in the middle of the 5 boxes. I found the tool tip solution and it seemed like it would work well. Maybe there is a better solution to what I am trying to do than the tool tip approach?

Mike - thanks for taking an open-minded approach here. The first thing I would recommend you do is to stop trying to make the page responsive. After you get the layout stabilized, then you can consider dealing with mobile and tablets. Trying to develop the layout while this responsive logic is on the page is making your job much more complex.

On reviewing your code again, I'd say it's not as bad as I originally thought. Please standby while I try to cook up a scheme for you to use here.

OK here's what I've set up - http://www.gws-sandbox.com/fallsway.html. The #forkLiftEquipment container now has no absolutely positioned child content. That content has been treated as if it were three rows:

1. The top row containing a single center-aligned container (catV)

2. The middle row containing three regions, all floated left and spaced apart by margins

3. The bottom row containing two containers, one floated left and one floated right

The middle and bottom row's containers are both set to 'overflow:hidden' to prevent the floats from escaping from the container.

I have moved the tooltip inside of the #forkLiftEquipment container so that its position will always be determined by the location of that container on the page.

I believe that this layout is stable - your job is to assign the correct top/left offsets to the tooltip so that it appears in the middle as you wanted, and to adjust the margins on the image containers so that they appear with the correct orientation relative to the center content. Once you get that done, the tooltip should always appear in the same location no matter the viewport dimensions.

By the way, I have jiggered a bit with your responsive logic (changed min-width on the CSS link from 1141px to 141px).

Thanks Murray, I have modifeed my code to reflect your changes. At least I think I got everything changed over. The "design" (or what there is so far!) looks good. I get the hover where I want it but it still doesn't seem to stay in between the cluster of 5 images. Here is the file I have been working on now: http://fallswayrents.com/indexMurray.html

The change in the CSS I'm not sure I understand. I had tried to set it up so that it would change style sheets for tablets. Really gave me fits. Obviously now I will re do it. But the min-width of 141 I don't get.

Forgot to mention... The position of the tool tip is still set by the javascript file SpryTooltip.js lines 116 and 117. So I wonder if I need to do change something in the js file so it doesn't get it positioning from there?

Hi Murray, are you still available to help me get the positioning settled for this project? I still can't seem to get it to display relative to the container of the 5 pictures. The jquery still sets the positioning. Thanks for your help!

Harpo - your chosen layout and the way you have implemented it is just very hard to work within. Would moving from Spry tooltips to jQuery improve that? I'm not sure, although Sudarshan is wise to suggest that you do so just for future maintenance of this - since Adobe has stopped developing Spry in Dreamweaver. Perhaps he also has some suggestions about your chosen approach? I'd love to hear if he does. I'll continue to look at your page and see if I can come up with a better plan. Sorry this has dragged on a bit....

I have been going through some jquery training and looking at the jquery tooltip online. I'm not thinking I am smart enough and able to understand how to make it work either. I can't get it out of my head that since you can specify for the tool tip to follow the mouse that you should be able to specify it "follow" or index related to an element like a div. Of course if I knew anything about js and jquery maybe I wouldn't think so!

Identifies the position of the tooltip in relation to the associated target element. Theofoption defaults to the target element, but you can specify another element to position against. You can refer to thejQuery UI Positionutility for more details about the various options.

I have never used jsfiddle before so I hope these links work but I think I may have found a solution. The only problem is I have no idea how to implement it! So the tool tips here index from the blue box and not the top left of the window.

Looks like that will work! I resized the browser window and the circle stayed put where it needs to. Checked it on my iPad in Safari and Chrome and it is good. Best of all it is working on my evil PC running IE! Looks like I can duplicate the block of js code & Divs to add 2 more images. Should I be able to copy the script into the head, add the call for the jquery and make sure the divs have the correct ids and should be good? Have to run out for 2 meetings and wont get to try it until this afternoon. Should it be easy to add a fade effect to the js blocks of code? I have no experience with the javascript or jquery so any advice will be appreciated. I can see where to make the changes for the offsets. Curious why the first block of js doesn't need the div id of "topcenter" when the other 2 use the div ids "middleleft" and "middleright"?

Here is where I am now. A little buggy and I don't seem to be able to get the positioning right yet. I have to add the other 2 images to the circle of 5 but can do that after we get the hove working right. I imagine I must have something out of order here? Mike

Getting closer but I have 2 tooltips appearing for the left and right images. Not sure why. Does the positioning for the left and right tool tips take into account the positioning of the top tool tip and add/subtract from it's coordinates?

Check it out now! http://fallswayrents.com/indexJQuery.html I just have to add the bottom 2 pics and tool tips. I hope I can just copy and paste code and make a few changes to the id's and script to make it all work! Thanks! Mike

Bummer, something has gone wrong. When I resize my browser the tooltips move and don't stay in the middle of the 5 images. Also when hovering the tooltips flash at the slightest movement of the cursor. Any ideas? Thanks! I thought we were done! Mike

Update... I think the flashing has stopped. Not sure why. The positioning is moving with browser resize. Also on my PC with IE it doesn't work and also on the iPad either. So close! Darn it!

Yes I am aware that the hover doesn't work on a tablet but I think if I remember right if you tap on the images the tip would pop up. That is ok I just need the tooltip to appear correctly with different screen sizes or when resizing the browser window.

Thanks again for looking at my code. I know it is kind of a mess right now with the CSS in 2 places, but I will clean it up before I publish it!

I hope to show something to my client this morning. Really appreciate your help!

I showed my client the effect on the hover and he loved it! Just have to get the positioning worked out. I think what I will do for ipad is just have the yellow circles replace the rounded corner transparent white boxes in the circle of 5 images with CSS. Thanks Sudarshan, I hope with some help from you we can get the positioning back to where it worked like in your example.

Good question! I added so much I am not sure where to start. I was just about to head for bed (midnight) but if you are available now I'll stay up! I will save my file and start stripping. Thanks, Mike

The best thing to do would be for you to look at the version you made right after seeing the link I gave you on my site and compare that with the current version to see what else is missing/ added. As much as I wish I can do this for you now, unfortunately our day has just begun here - so I'm on the forums at a sideline - while I'm staring at over 70+ emails I have to respond to!

If you're on a Mac, use TextWrangler to compare 2 files. For windows, use WinDiff