PDA

View Full Version : bring tooltip on top!



Adler80
11-15-2008, 02:18 PM
1) Script Title: Cool DHTML Tooltip

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm

3) Describe problem: I used this script for a description of a photo album (google photo album slides embeded on th site) but it apears under the slideshow. how can i make it appear over the photo album?

thank you
Ader

jscheuer1
11-15-2008, 02:39 PM
That would depend upon how the slide show is doing that. Most likely it is via a higher z-index and/or native stacking order than the tip. If it is either of those, you can just raise the z-index of the tip to compensate:


<style type="text/css">

#dhtmltooltip{
position: absolute;
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 10000;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

</style>

But it might be something else, or something in addition to the above required to change this. If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

Adler80
11-15-2008, 04:40 PM
Thank you for your Assistance John. I have tried what you said and nothing has changed i even tried z-index: 10000000, but still stayed under. But the problem is it only happens on my google photos slideshows (it's ok with msn photo slideshow). is there a way i can send the slide back somehow, since it stays on top of everything, the dropdown menu, tooltip, etc.

unfortunately the side is not launched yet, so i cannot send you the link, but i am posting the related codes below for you to see.


<embed type="application/x-shockwave-flash" src="http://picasaweb.google.com/s/c/bin/slideshow.swf" width="600" height="500" flashvars="host=picasaweb.google.com&RGB=0x000000&feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2FAdlerInPrague%2Falbumid%2F5248526785001635345%3Fkind%3Dphoto%26alt%3Drss%26authkey%3DWckR4RQ 3xuQ" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

<div id="dhtmltooltip"></div>

<script type="text/javascript" src="../ddrivetip.js">
</script>

<p><a onmouseover="ddrivetip('my text here','yellow', '550')"; onmouseout="hideddrivetip()">my text title</a></p>


thank you again.
Adler

jscheuer1
11-15-2008, 05:10 PM
That's Flash. You need wmode=transparent, as long as no script (some would be OK, these vary) is used to alter the Flash tag, just add it manually:


<embed wmode="transparent" type="application/x-shockwave-flash" src="http://picasaweb.google.com/s/c/bin/slideshow.swf" width="600" height="500" flashvars="host=picasaweb.google.com&RGB=0x000000&feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2FAdlerInPrague%2Falbumid%2F5248526785001635345%3Fkind%3Dphoto%26alt%3Drss%26authkey%3DWckR4RQ 3xuQ" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

<div id="dhtmltooltip"></div>

<script type="text/javascript" src="../ddrivetip.js">
</script>

<p><a onmouseover="ddrivetip('my text here','yellow', '550')"; onmouseout="hideddrivetip()">my text title</a></p>

Now, that (possibly also in conjunction with the higher z-index for the tip) will take care of it, but only if the Flash code being used allows it to, most will, I have seen some that will not.

Good Luck!

Adler80
11-16-2008, 02:02 PM
You are a hero John. It did take care of it.

Thank you.

I will inform you when the website is ready, since it is my first experience,am so excited and would love to have some professional feedback.

take it easy and keep up the good job
Adler

Adler80
11-16-2008, 03:09 PM
Just another quick question John,

what do i do if i want to have a picture shown in my tooltip rather than text?

thanks

jscheuer1
11-16-2008, 03:29 PM
If I understand what you are saying, use this script instead:

http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm

Does that look like what you are after?

Adler80
11-16-2008, 05:20 PM
absolutely :-)

thank you very much

but the problem is, i have another javascript running on that page and i can't make them both running together!!! they both work perfectly separetly but when i put this one in the page the other one stops working!!!

Adler

jscheuer1
11-16-2008, 05:29 PM
That would likely be some type of onload conflict. I assume you are now trying to use the:

Image w/ description tooltip

So if it's just an onload conflict, we can change this:


window.onload = initTip;

in the Image w/ description tooltip script to:


if(typeof window.addEventListener!='undefined')
window.addEventListener('load', initTip, false);
else if(typeof window.attachEvent!='undefined')
window.attachEvent('onload', initTip);

But the conflict may run deeper. If so I would need to see both scripts.

Adler80
11-16-2008, 06:22 PM
You are the best John,

u do magic. it worked ;)

thank you very much
Adler

Adler80
11-17-2008, 03:50 PM
Hey John,

Just wanted to let you know that I finally launched the website and any professional feedback from you would be appreciated. So if you have time to have a look and tell me what you think, that'll be great. Here is the URL: http://www.mobasser.me

I also have a problem that is not related to this discussion, but since you helped me through the above issue really kindly and clearly, I thought i mention it here too.

The problem is if you go to my galleries page, on the right side there is a part called favorites where I put all the pictures and musics and movies I like. but it seems like the page tries to load all the music before openning the page and that makes it take a long time to open. And since the movie traileres are being loaded from YouTube, so I had to make the tooltip refresh the whole page when being closed so it would stop the trailer's being played, but then every time, it takes ages to re-open the page.

I don't know if I could make it clear enough, but you'll see what I mean once you go to the page.

I appreciate your assistance John
Adler