How to display a tooltip in your drop-down

Every developer in his/her coding life was at least once confronted with the need to show a tooltip in a drop-down for long items. 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****************
<CODE>

</CODE>

 

******************HTML Section of the aspx page***********
<CODE>
<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>
<asp:DropDownList 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=”Threeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee”>Threeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</asp:ListItem>
<asp:ListItem Value=”Four”>Four</asp:ListItem>
<asp:ListItem Value=”Five”>Five</asp:ListItem>
</asp:DropDownList>
</form>
</CODE>

Advertisements