Rich HTML Balloon Tooltip

**selfish** · 12-31-2007, 08:14 AM

Rich HTML Balloon Tooltip
http://www.dynamicdrive.com/dynamici...oontooltip.htm

Hi. I'm trying to implement this script on my website, and had it working in a seperate page, without any kind of extra layout (you can see parts of it here - it's not pretty cause some css is missing, but you get the idea - AND the script itself is functioning as expected).

Now, though, when I put it into the full layout, here, it hides the divs just fine (cause that's just the plain css working as is), but simply won't display them when needed. I've had a look into the js to try and work out how positioning is determined, but simply have no idea what I'm doing. Can anyone help explain how to change where it shows up?

Thanks in advance,
selfish.

oh and did anyone notice you can't post new threads from safari? heh.

**jscheuer1** · 01-01-2008, 06:47 PM

You have an onload conflict. Remove this from the end of balloontip.js:

Code:

window.onload=initalizetooltip

Add to your body onload:

Code:

<body bgcolor="#000000" onload="initalizetooltip();MM_preloadImages('images/allgames%20fw_r2_c1_f2.gif','images/allgames%20fw_r2_c3_f2.gif');">

But there could also be other problems.

**selfish** · 01-02-2008, 03:16 AM

wow, thanks for helping out! i made those changes, but still can't make it work. i want to make a tooltip of some kind work - is continuing to try and make this one happen going to be more effort than it's worth?

should i attempt some different kind of tooltip, or do you have some idea of where i should be looking for conflicts?

thanks

**codeexploiter** · 01-02-2008, 03:22 AM

It seems that the left and top value calculated by the tooltip script is having some problem. The tooltip is visible in your case but its left and top values are not correct..

**jscheuer1** · 01-02-2008, 05:36 AM

Yes, er well, I screwed up. There was no conflict, I missed:

Code:

if (window.addEventListener)
window.addEventListener("load", initalizetooltip, false)
else if (window.attachEvent)
window.attachEvent("onload", initalizetooltip)
else if (document.getElementById)

Which, if you had left it alone, would have been:

Code:

if (window.addEventListener)
window.addEventListener("load", initalizetooltip, false)
else if (window.attachEvent)
window.attachEvent("onload", initalizetooltip)
else if (document.getElementById)
window.onload=initalizetooltip

To make a long story short, all modern browsers will load that with no conflict. My mistake. codeexploiter is probably right, it looks like some problem with positioning, either css, and/or the placement of the script markup on the page.

**jscheuer1** · 01-02-2008, 05:58 AM

OK, so put balloontip.js back the way that it was, and get rid of the change to the body onload, basically put everything back the way that it was before I told you to change it. Next, due to the styling of your page, the class="balloonstyle" divisions all need to go at the very end, or the very beginning of the body section (here shown at the very end):

Code:

 . . . ition=21; 
var sc_security="1a1f1b24"; 
</script>

<script type="text/javascript" src="http://www.statcounter.com/counter/counter_xhtml.js"></script><noscript><div class="statcounter"><a class="statcounter" href="http://www.statcounter.com/"><img class="statcounter" src="http://c22.statcounter.com/3295709/0/1a1f1b24/0/" alt="website metrics" /></a></div></noscript>
<!-- End of StatCounter Code -->
<div id="boomshine" class="balloonstyle">
Relaxing and fun, easy to play.<br /><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="90" height="20" id="rating" align="middle">
                  <param name="allowScriptAccess" value="sameDomain" />
                  <!-- here's the bit --> 
                  <param name="movie" value="games/rating_id_readonly.swf?id=boomshine" />
                  <param name="quality" value="high" />
                  <param name="bgcolor" value="#000000" />
                  <!-- here's the other bit -->
                  <embed src="games/rating_id_readonly.swf?id=boomshine" quality="high" bgcolor="#000000" width="90" height="20" name="rating" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed>
                  </embed>
                  </embed>
            </object></div>
<div id="ufomania" class="balloonstyle">It's mania, UFO style!<br />
      <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="90" height="20" id="rating" align="middle">
<param name="allowScriptAccess" value="sameDomain" />

<!-- here's the bit -->
<param name="movie" value="games/rating_id_readonly.swf?id=ufomania" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />

<!-- here's the other bit -->
<embed src="games/rating_id_readonly.swf?id=ufomania" quality="high" bgcolor="#000000" width="90" height="20" name="rating" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></div>
<div id="5differences" class="balloonstyle">It's spot the difference...with a difference!<br /><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="90" height="20" id="rating" align="middle">
<param name="allowScriptAccess" value="sameDomain" />

<!-- here's the bit -->
<param name="movie" value="games/rating_id_readonly.swf?id=5differences" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />

<!-- here's the other bit -->
<embed src="games/rating_id_readonly.swf?id=5differences" quality="high" bgcolor="#000000" width="90" height="20" name="rating" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></div>
<div id="connalandcam" class="balloonstyle">Beware the time wizard Glek!<br />
                <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="90" height="20" align="middle">
                  <param name="allowScriptAccess" value="sameDomain" />
                  <!-- here's the bit -->
                  <param name="movie" value="games/rating_id_readonly.swf?id=connalandcam" />
                  <param name="quality" value="high" />
                  <param name="bgcolor" value="#000000" />
                  <!-- here's the other bit -->
                  <embed src="games/rating_id_readonly.swf?id=connalandcam" quality="high" bgcolor="#000000" width="90" height="20" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed>
            </object></div>
</body>
</html>

Once I did that, it worked here in a local demo.

**codeexploiter** · 01-02-2008, 05:59 AM

Check the following lines in balloontip.js

Code:

dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"

Try to identify the value the script is setting as the left and top value and adjust it (if necessary) for your requirement.

**jscheuer1** · 01-02-2008, 06:13 AM

Originally Posted by codeexploiter

Check the following lines in balloontip.js

Code:

dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"

Try to identify the value the script is setting as the left and top value and adjust it (if necessary) for your requirement.

No need, see my previous post, fully tested and works.

**selfish** · 01-02-2008, 11:47 AM

my god. i cannot believe it works. you guys are THE BEST.

THE BEST.

Thread: Rich HTML Balloon Tooltip

Thread Tools

Search Thread

Rich HTML Balloon Tooltip

Bookmarks

Bookmarks

Posting Permissions