Log in

View Full Version : Balloon tooltip


tripwater
02-20-2007, 07:31 PM
1) Script Title: Balloon tooltip

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

3) Describe problem: I have this cool script working on various places in my site then I placed it in a different location and now the arrow image is large and the tooltip is not lining up.

Here is a link to what I am talking about.

http://www.photogap.net/tommy/ I know I have something wrong on my page that is breaking the script. I just cannot find it. Like I siad I have this working in other areas in my site and I basically copy and pasted the working code within this page and now it is not acting right. If you Mouseover the login link at the top of the page, you will see that it works(that section is included from a php page include from another section). Then mouse over the 'Add Tom Cruise to favorites' link to see the problem.

Thank you for any help in this
ddadmin
02-21-2007, 06:19 AM
Move your tooltip(s) HTML to the bottom of the page, directly above the </body> tag. So in your case:


<div id="userballoon" class="balloonstyle" style="width: 250px; top: 163px; left: 0pt; visibility: hidden;">
<img src="test_files/fav_icon.png" border="0" height="28" width="25">
Click this link to add this photographer to your favorites. This
feature uses cookies to remember your selections throughout the site.
You must have cookies enabled in order for this feature to work.
</div>
</body>

The containership in which your tooltip HTML is currently added to is confusing the script's positioning of it. As a general tip, it's best to always have your tooltip HTML added as a direct child of the <BODY> tag.
tripwater
02-21-2007, 03:04 PM
Thank you very much for the timely response to my question. Is there any other way I can pull this off and keep my link where it is? If I make the change you mentioned, it puts my link outside of my container and at the bottom of the page. I also have this working in my gallery page which has a handful of container divs within it. Is there something specifically I am doing on this page to cause it not to work?

Thank you again.
tripwater
02-21-2007, 03:26 PM
Actually, I think I am going to try out the Cool DHTML Tooltip II on this site. It may work out better for me.
ddadmin
02-21-2007, 08:34 PM
Thank you very much for the timely response to my question. Is there any other way I can pull this off and keep my link where it is? If I make the change you mentioned, it puts my link outside of my container and at the bottom of the page. I also have this working in my gallery page which has a handful of container divs within it. Is there something specifically I am doing on this page to cause it not to work?

Thank you again.

Just to make sure you understand, you don't have to move the links on your page around (those in which a tooltip will show up when you mouse over). The only item you need to move outside other tags are the invisible DIV containing the actual tooltip.