Tooltips are poping up behind Dropdown Box

[calandrelli]

I have small markers that produce pop-up tooltips for each field on a page. They work great for text boxes but when I use them next to a Dropdown box they appear behind the box. Any ideas how to force them in front of the box?

Here is the code for the label and box....

           <td width="311" valign="top" height="37"> 
            <span class="fieldname2">Key Product <a class="tooltips2" href="#" onMouseOver="stm(Text[11],Style[2])" onMouseOut="htm()">[?]</a> 
            *</span><br>
              <!--webbot bot="Validation" b-value-required="TRUE" b-disallow-first-item="TRUE" --><select tabindex=9 name="Key_Product">
<%
query2 = "Select DISTINCT Key_Prod, Key_Prod from tbl_DD_KeyProd ORDER BY Key_Prod"
recordset2.Open query2, connect
%>
                <option value="" selected>Choose</option>
<%
Do While Not recordset2.EOF
     NoResults = False
%>
                <option value="<%=recordset2("Key_Prod")%>"><%=recordset2("Key_Prod")%></option>
<%
recordset2.MoveNext
Loop
recordset2.Close
%>
</select>
          </td>

Here are the associated lines from the style js file.

Text[...]=[title,text]

Style[...]=[TitleColor,TextColor,TitleBgColor,TextBgColor,TitleBgImag,TextBgImag,TitleTextAlign,TextTextAlign, TitleFontFace, TextFontFace, TipPosition, StickyStyle, TitleFontSize, TextFontSize, Width, Height, BorderSize, PadTextArea, CoordinateX , CoordinateY, TransitionNumber, TransitionDuration, TransparencyLevel ,ShadowType, ShadowColor]
*/

var FiltersEnabled = 1 // if your not going to use transitions or filters in any of the tips set this to 0

Text[11]=["Key Product","Indicate if the change is linked to a key product that is not allowed to back order."]

Style[2]=["white","black","#003465","#E8E8FF","","","","","","","right","","","",200,"",2,2,10,10,"","","100","",""]

applyCssFilter()

 

[xwb]

Looks very complex. Why not just use title= in <td>. Is it one of those that doesn't work on every browser? That is the only reason I can see for coding functionality that is already provided by the browser.

 

[calandrelli]

Most of that code drives the drop down box...I only included it to be complete.

This is the only line that creates the tool....

<a class="tooltips2" href="#" onMouseOver="stm(Text[11],Style[2])" onMouseOut="htm()">[?]</a>

These line populate the tip and add style....

Text[11]=["Key Product","Indicate if the change is linked to a key product that is not allowed to back order."]

Style[2]=["white","black","#003465","#E8E8FF","","","","","","","right","","","",200,"",2,2,10,10,"","","100","",""]

applyCssFilter()

It's actually a very good looking tooltip with a title, a body and customized color schemes as well as sticky placment.

 

[xwb]

I suppose the question I ought to ask is what does stm do? At a guess it is probably a piece of javascript which shows a <div> or a <span> at a particular location and htm hides it. I'm just guessing here as that is how I used to do it until I discovered title.

The problem with this is that a <div> and <span> are a browser controls and dropdown lists will always appear on top of them. I don't think there is a way around it unless you always show the tooltip on the bottom right of the control that you're hovering over instead of the bottom right of the mouse pointer.