Rich HTML Balloon Tooltip & Select Boxes

[bigboy99]

1) Script Title:
Rich HTML Balloon Tooltip

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

3) Describe problem:
The Tooltip appears behind a <select> box in Internet Explorer 6.0. It appears to be Ok in FireFox. Below is a small screen shot snippit of what I am referring to. I realise this is more an IE & layer specific problem because I have come accross the same thing before with a dhtml menu. The solution the menu used was to hide the select boxes with the menu appeared and when the menu dissapeared the select box reapeared. Can anything be done in this case?

[ddadmin]

Ok, had some time, so here is a modified version of Balloon Tooltip that lets you hide any control on the page when the mouse moves over a particular link. For example:

<a href="http://www.dynamicdrive.com/style/" rel="balloon1" rev="test">Dynamic Drive CSS Library</a><br /><br />

<form id="test">
Pesky Form: <input type="text" size="25" />
</form>

<!--Sample corresponding tooltip-->

<div id="balloon1" class="balloonstyle">
<img src="shadetabs.gif" style="float: right; margin-left: 5px; border:1px solid black" />Original, practical CSS codes and examples such as CSS menus to give your site a visual boast!
</div>

Just insert a "rev" attribute inside the activating link with the ID of the element to hide as its value (ie: test). Attached is the modified .js file to enable this, plus a sample HTML page.

[bigboy99]

Thanks very much, that is exactly what I was after. Thanks again for this very useful script.

[maclouie]

I installed the fixed .js file and got it to work as explained. However, my form has two select fields and only one of them hides. How do I get more than one select field to hide when a tooltip is moused over?

BTW, I love this tooltip

[ddadmin]

At a glance the modification actually hides an entire form (ie: with ID="test"), so if your two select boxes are all in the same form, both should be hidden. Or are they in two different forms?