I have form combination of text boxes and selectboxes. My requirement is when mouse pointer comes over the text boxes and select boxes one tool tip will come over.

For reference please check this url :
http://www.pedsters-planet.co.uk/dir...nk_cur_cat=198


I write one script for tooltip with help of javascript and css. It is working perfectly at mozila. But I face problem in IE. In IE tooltip doesnot visible over select box. Tooltip goes back of select box instead of coming over select box.

How it can be solved?

my javascript is :

function showtip(current,e,text){

if (document.getElementById)
{
tt_n = navigator.userAgent.toLowerCase();

// this is the way the standards work
var style2 = document.getElementById('tooltip').style;
style2.display = 'block';

if(tt_n.indexOf("msie") != -1) // if browser is IE
{
style2.left=e.x+8;
style2.top=e.y+10;
}
else
{
style2.left=e.pageX+8;
style2.top=e.pageY+10;
}

document.getElementById('tooltip').innerHTML='<div style="z-index: 150;width:250px;padding:2px;filter:shadow(color:gray,strength:10, direction:135);">'+text+'</div>';

}
else if (document.all)
{

// this is the way old msie versions work
var style2 = document.all['tooltip'].style;
style2.display = 'block';
style2.left=e.x+8;
style2.top=e.y+10;

eval("document.all.tooltip").innerHTML=text;
}
else if (document.layers)
{
// this is the way nn4 works
var style2 = document.layers['tooltip'].style;
style2.display = 'block';
style2.left=e.pageX+8;
style2.top=e.pageY+10;

document.layers['tooltip'].innerHTML=text;
}

}

function hidetip(){

if (document.getElementById)
{
// this is the way the standards work
var style2 = document.getElementById('tooltip').style;
style2.display = 'none';
}
else if (document.all)
{
// this is the way old msie versions work
var style2 = document.all['tooltip'].style;
style2.display = 'none';
}
else if (document.layers)
{
// this is the way nn4 works
var style2 = document.layers['tooltip'].style;
style2.display = 'none';
}

}

- - - - -- - - - - - -- - - - - - - - - - - -- - - -- - - - -- - - - - - -- - - - - - - - - - - -- - - --- - - - -- - - - - - -- -

style sheet is :

#tooltip{
z-index: 200;
display: none;
width:250px;text-align:left;padding:5px;background-color:#FFDAB9; border:1px solid orange;font-size:12px;
position: absolute;
}

- - - - -- - - - - - -- - - - - - - - - - - -- - - -- - - - -- - - - - - -- - - - - - - - - - - -- - - --- - - - -- - - - - - -- -

HTML is :

<div id="tooltip">
</div>


<select name="qus" onMouseover="showtip(this,event,'select question" onMouseout="hidetip()">

<option value="0">Select a question</option>
</select>