IE DropDown Tooltip 6

advertisements

I need to place tooltip for dropdown selectbox for IE6 only.The requirement is , I have select box of width:150px and i have 4 option values.The text inside the option value is greater than '150px' So, it is not showing the complete text in the select box.Instead of increasing the size of the selectbox,I need to display a tooltip with entire text.If any one having a any idea please help me out.


this is the code to use with the ASP.net dropdown list control

This code piece provides with a tooltip for the dropdown list. The drop down list can be set to a smaller width and the tooltip will show the value in the dropdown list.

****JavaScript Section*******

<SCRIPT language="JavaScript">
<!--
showHideTooltip = function ()
{
var obj = document.getElementById("DropDownList1");
document.getElementById("tooltip").innerHTML =
obj.options[obj.selectedIndex].value;
if(event.type == "mouseleave")
{
document.getElementById("tooltip").style.display = "none";
}
else
{
document.getElementById("tooltip").style.display = "inline"
document.getElementById("tooltip").style.top = event.y;
document.getElementById("tooltip").style.left = event.x;
}
}
//-->
</SCRIPT>

*******HTML Section of the aspx page****

<form id="Form1" method="post" runat="server">
<SPAN id="tooltip" style="BORDER-RIGHT: #000000 1px solid; PADDING-RIGHT:
3px; BORDER-TOP: #000000 1px solid; DISPLAY: inline; PADDING-LEFT: 3px;
FONT-SIZE: 12px; PADDING-BOTTOM: 3px; BORDER-LEFT: #000000 1px solid;
PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px solid; FONT-FAMILY: Verdana;
POSITION: absolute; BACKGROUND-COLOR: #a6bed9">
</SPAN>
<aspropDownList id="DropDownList1" style="Z-INDEX: 101; LEFT: 104px;
POSITION: absolute; TOP: 160px"
runat="server" Width="80px" Height="24px">
<asp:ListItem Value="One" Selected="True">One</asp:ListItem>
<asp:ListItem Value="Two">Two</asp:ListItem>
<asp:ListItem
Value="Threeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeee">Threeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeee</asp:ListItem>
<asp:ListItem Value="Four">Four</asp:ListItem>
<asp:ListItem Value="Five">Five</asp:ListItem>
</aspropDownList>
</form>