PDA

View Full Version : tooltip script problem: positioning a picture on the browser window



paldo
05-30-2010, 08:08 AM
On your webpage I've discovered a nice tooltip script:
http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm

I have some pictures to display. The pictures should pop-up at the far right of the browser window.
I changed the CSS script as follow:

.ddimgtooltip{
box-shadow: 3px 3px 5px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 3px 3px 5px #818181;
-moz-box-shadow: 3px 3px 5px #818181;
display:none;
position:absolute;
right:10px;
top:50px;

border:1px solid black;
background:white;
color: black;
z-index:2000;
padding: 4px;
}

where I've added right:10px; top:50px;
The pop-up picture is still positioned near the link and not 10px from the right corner of the browser window.
Any suggestions?

ddadmin
05-31-2010, 09:07 AM
The position of the tooltips is controlled by the script, not the CSS, so you'll need to edit the former to get the result you want. Try finding the below line inside the .js file:


x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(ddimgtooltip.tooltipoffsets[0]*2) : x


and change that to:


x=($(document).scrollLeft()+$(window).width()-tipw-5

paldo
06-01-2010, 05:26 PM
Dear ddadmin, thanks for your help. Unfortunately with the changes you suggest the image does not pop up. Most probably there are more changes to do.

ddadmin
06-01-2010, 07:51 PM
Ah yes there was a slight error in my syntax, and upon testing, in logic as well actually. Try replacing the original line with this instead:


x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(ddimgtooltip.tooltipoffsets[0]*2) : $(document).scrollLeft()+$(window).width()-tipw-10

paldo
06-02-2010, 08:34 AM
Dear ddadmin

you are a genius ! It works fine on all browsers.

It would be nice if you can add this improvement to the script to the tutorial here:
http://www.dynamicdrive.com/dynamici...agetooltip.htm

Thank you for your help

ssnaples
02-09-2011, 07:40 PM
I am trying to accomplish the same thing as Paldo. I replaced the js code that you wrote, but nothing happens. The tooltip still loads offset from the cursor based on

tooltipoffsets: [100, 100].

Am I missing something? I would like the tooltip to appear in the same exact position no matter where the cursor is. Any help is appreciated. Thanks!