ToolTip for DropDownList control in ASP.net

Posted by Zafar Ullah - zafarjcp@gmail.com | 5:09 AM | , , , , | 0 comments »

Adding a dynamic tooltip to the list of dropdownlist items is one of the issues addressed in asp.net. Some time its very important to have a tool tip of a DropDownList specially when the text added in ListItems are longer then the width of DropDownList control.
NOTE This solution only works with IE7+, Firefox

The following example demonstrates you how to show a tooltip when you Mouse Over on a DropdownList / Select box.


<script language="javascript" type="text/javascript">

function showTooltip(obj)
{
if(obj.options[obj.selectedIndex].title == "")
{
obj.title = obj.options[obj.selectedIndex].text;
obj.options[obj.selectedIndex].title = obj.options[obj.selectedIndex].text;
for(i =0;i<obj.options.length;i++)
{
obj.options[i].title = obj.options[i].text;
}
}
else
obj.title = obj.options[obj.selectedIndex].text;
}
</script>


In html call the above given function as:



<asp:dropdownlist id="ddlTooltip" onmouseover="showTooltip(this)" width="40px" runat="server"></asp:dropdownlist>

0 comments