Skip navigation
Currently Being Moderated

how to position spry tool tip relative to a div instead of top left of page

Mar 3, 2013 7:10 AM

Tags: #spry #tooltip

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:

 

In  SpryTooltip.js  change Line 211:

From:

Spry.Widget.Utils.putElementAt(this.tooltipElement, this.pos, {x:this.offsetX, y:this.offsetY}, true);

To:

Spry.Widget.Utils.putElementAt(this.tooltipElement, {x:this.offsetX, y:this.offsetY}, true);

This ignores the mouse position and just uses the offsets to set the fixed postion...

 

here is a link to what I am working on.  The top center forklift is the item I have built so far that has the tooltip on hover.

 

http://fallswayrents.com/indexHover.html

 

Thanks!  Mike

 
Replies 1 2 Previous Next
  • Currently Being Moderated
    Mar 3, 2013 8:34 AM   in reply to Harpo1943

    The way those tooltips work is as follows:

     

    1. They are absolutely positioned elements on the page -

    <div class="tooltipContent" id="sprytooltip1" style="display: none; position: absolute; top: 316px; left: 810px; visibility: visible; z-index: 9999; ">

                        <img src="Images/CAT-Class-V-5000-Lift-Truck-Rentals.png" alt="CAT Internal Combustion Pneumatic Tire Lift Truck Rentals " width="320" height="280" id="sprytrigger1" title="CAT V 5000 IC Pneumatic Fork Lifts for Rent">

    <p>CAT Pneumatic Lift Trucks</p></div>

    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 -

     

    <div class="tooltipContent" id="sprytooltip1" style="display: none; position: absolute; top: 316px; left: 810px; visibility: visible; z-index: 9999; ">

                        <img src="Images/CAT-Class-V-5000-Lift-Truck-Rentals.png" alt="CAT Internal Combustion Pneumatic Tire Lift Truck Rentals " width="320" height="280" id="sprytrigger1" title="CAT V 5000 IC Pneumatic Fork Lifts for Rent">

    <p>CAT Pneumatic Lift Trucks</p></div>

     

    to this -

     

    <div style="position:relative;">

    <div class="tooltipContent" id="sprytooltip1" style="display: none; position: absolute; top: 316px; left: 810px; visibility: visible; z-index: 9999; ">

                        <img src="Images/CAT-Class-V-5000-Lift-Truck-Rentals.png" alt="CAT Internal Combustion Pneumatic Tire Lift Truck Rentals " width="320" height="280" id="sprytrigger1" title="CAT V 5000 IC Pneumatic Fork Lifts for Rent">

    <p>CAT Pneumatic Lift Trucks</p></div>

    </div>

     

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 3, 2013 9:36 AM   in reply to Harpo1943

    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 -

     

    <div style="position:relative;width:80%; max-width:1260px; min-width:780px; margin:0 auto;">

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 3, 2013 10:33 AM   in reply to Harpo1943

    I would leave the javascript alone. Is your current page at the posted location?

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 3, 2013 11:42 AM   in reply to Harpo1943

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 3, 2013 3:42 PM   in reply to Harpo1943

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 4, 2013 5:51 AM   in reply to MurraySummers

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

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 4, 2013 6:26 AM   in reply to Harpo1943

    @Harpo: To add to Murray's excellent responses, I'd like to add my 2 cents!

     

    Spry has been deprecated and is no longer officially supported by Adobe: http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framew ork-availability.html

     

    While it will still work and you can get away with it, I'd recommend that you consider switching to jQuery, going forward!

     

    -ST

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 4, 2013 9:08 AM   in reply to Harpo1943
     
    |
    Mark as:
  • Currently Being Moderated
    Mar 4, 2013 3:23 PM   in reply to Harpo1943

    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....

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 5, 2013 12:08 AM   in reply to Harpo1943

    Take a look at this sample I've made for you: http://sudarshan.me/adobeforum/samples/relativetooltip/

     

    Notice I've used 3 different divs with 3 different positions on the page. I've also written 3 functions for runtime positioning of tooltip elements that will be triggered from those.

     

    The positioning for the element divs can be changed with this script corresponding to the parent trigger div:

     

    $('#tooltip-container').css({top:offset.top + 120, left:offset.left - 100}).show();

     

    Uses jQuery library 1.7.1 and the forklift picture from your website!

     

    Check it out and tell me what you think.

     

    -ST

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 5, 2013 9:20 AM   in reply to Harpo1943

    Line 65 of HTML code:

     

    $('.tooltip').hover(function(){

    change that to:

     

    $('.tooltip#topcenter').hover(function(){

     

    Because all tooltip-containers have a class .tooltip, the previous code displayed the 2 other tooltips too since we didn't have a tag defined.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 5, 2013 9:39 AM   in reply to Harpo1943

    Looks good!

     

    Yes, you can add as many functions as you'd want within the javascript. Be sure to use unique ID's for each one of them though and to also write relevant CSS for them.

     

    For example, #bottomleft and #bottomright and tooltip-container4, 5, 6 and so on...

     

    Good luck

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 5, 2013 7:48 PM   in reply to Harpo1943

    Latest link please.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 5, 2013 9:50 PM   in reply to Harpo1943

    Well, I'm unsure what has caused this goof-up now. Especially considering it was working well with the code I showed you from http://sudarshan.me/adobeforum/samples/relativetooltip/

     

    Another question I have for you - for a responsive layout (tablet/ mobile), hover will not work anyway. Have you thought of that?

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 6, 2013 8:59 PM   in reply to Harpo1943

    @Harpo, thats great to hear!

     

    Can you strip off what you added recently that caused the 'responsiveness' to stop so we can test this out a step at a time, to rule out possible hiccups?

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 6, 2013 9:21 PM   in reply to Harpo1943

    Well, if it is too late for you, please go ahead, get some rest! We can do this later. It's 10.50AM here in India.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 6, 2013 9:32 PM   in reply to Harpo1943

    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

     
    |
    Mark as:
1 2 Previous Next

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points