Balloon Tip on Other Elements

[jkunkel]

1) Script Title:
Rich HTML Balloon Tooltip

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...oontooltip.htm

3) Describe problem:
Not a problem, it works as advertised. However... I would love to be able to get the tooltip to appear on other elements than an href. Specifically, I have AREA(s) on a MAP. I can add the REL= easily enough. I have tried that, but it won't budge. Any tweaks that can be made to that JS file to allow the popup to appear on other elements? Thanks.

[ddadmin]

Image maps work completely different from regular links when it comes to positioning the menu (a lot more complicated), so just adding a "rel" attribute to the <area> tag won't work. However, below attached is a modified version of balloontip.js that enables the tooltip to work on rectangular image maps (not other shapes like circle). A sample HTML would look like:

<!--Sample link-->

<p><map name="FPMap0">
<area href="ccc.com" shape="rect" coords="104, 11, 157, 46" rel="balloon2"></map>
<img border="0" src="file:///C:/bench2/logo.gif" width="315" height="64" usemap="#FPMap0"></p>

<!--Sample corresponding tooltip-->

<div id="balloon2" class="balloonstyle" style="width: 350px; background-color: lightyellow">
Award winning JavaScript tutorials and over 400+ free scripts.
</div>

The only feature missing is that the tooltip when added to image maps won't dynamically adjust itself if too close to the 4 corners of the browser window. I'll have to do that later.

[Gman]

I think this is an awesome script, but I also have a minor issue that I'd love to get your help on guys.

I'm using it right now as a Help Info for users filling out forms, and my only problem is that by default, the help balloon covers the form because it appears BELOW the Help Link and covers up the entire form. Is it possible to modify the JS to change the default position to be above the link rather then below it?

I have minor JS experience and the script was just too complicated for me to try to find this solution. Please help... thank you very much for your time guys!

[sim4800]

You can change the default setting in the JS to negative number.

var verticaloffset=-30 //vertical offset of tooltip from anchor link, if any

I was looking to change also the horizontal offset, but could not find any Variable for horizontal offset. If any one knows how to set it, please post