Friday 25 March 2011

Dropdownlist - Adding tooltip for each listitem

There are times when you are designing a page with space constraint for the cotrols.
One such case can be with the Dropdownlist whose items may need more space then what it was allocated for. In this situation the user will not be able to see the complete text of the listitems. A solution to this situation is to add tooltip for the listitems.

Consider here, we have the Dropdownlist: 

<div style="width: 600px; margin: auto;">
<div style="width: 150px; float:left">Account Name: </div>
<div style="width: 400px; float:left">
<asp:DropDownList ID="DropDownList1" runat="server" Width="120px">
<asp:ListItem Value="1">Application Services</asp:ListItem>
<asp:ListItem Value="2">Toyota Motors Private Limited</asp:ListItem>
<asp:ListItem Value="3">Ford Motors Private Limited</asp:ListItem>
</asp:DropDownList>
</div>
</div>



Which leads us to have a dropdownlist as below.






We added the tooltip for each listitem.

foreach(ListItem _listItem in this.DropDownList1.Items)
{
_listItem.Attributes.Add("title", _listItem.Text);
}



Hence we have the Dropdownlist with tooltip as shown below:


 

No comments: