Introduction

In some cases, you have a restricted design that forces you to place a DropDownList control inside a "td" or "div" element, which has a fixed width. If that DropDownList contains long pieces of text then the user will not be able to read the whole text (as illustrated in Figure 1).

Figure 1: Users cannot read the item

The best solution to overcome this problem is to add a ToolTip for the item to display the whole text. As we know, the regular DropDownlist does not support that which is the main goal of this article.

Finding the Solution

Let us say that we have a DropDownList that contains three list Items.

Listing 1

<asp:DropDownList ID="DropDownList1" runat="server" Width="119px">
  <asp:ListItem Value="1">Technical Department</asp:ListItem>
  <asp:ListItem Value="2">Production Department</asp:ListItem>
  <asp:ListItem Value="3">HR Department</asp:ListItem>
</asp:DropDownList>

As I said, the regular DropDownList does not support a ToolTip for each list item, so we will add a new attribute for each list item which is the "title" attribute.

Listing 2

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

As you can see in Listing 2, we wrote a foreach loop to walk through the DropDownList item-by-item to add the title attribute.

You can enter any text to represent the ToolTip for the item as description; here in our example I am using the list item text to be its ToolTip.

We need to add a title attribute for the selected item too, as shown in Listing 3.

Listing 3

DropDownList1.Attributes.Add("onmouseover", 
  "this.title=this.options[this.selectedIndex].title");

View Browser Source Code

If you view your code in a browser (right click on the page and choose view source), take a look at the HTML render element for our DropDownList in listing 4. Note that a new title attribute IS added for each item in the list.

Listing 4

<select name="DropDownList1" id="DropDownList1" 
    onmouseover="this.title=this.options[this.selectedIndex].title" 
    style="width:119px;">
  <option value="1" title="Technical Department">Technical Department</option>
  <option value="2" title="Production Department">Production Department</option>
  <option value="3" title="HR Department">HR Department</option>
</select>

Figure 2: ToolTip for each Item

The above figure shows you how our new ToolTip works when the mouse goes over the list item.

What is more?

You can create a new custom control that inherits from DropDownList class, and that custom control will contain a new property called "TooltipDataField." This will allow developers to bind data to display it in the tooltip of each item.

Conclusion

In this article, we have added a new ToolTip attribute for each item in the DropDownList which will help the users to read the whole text. I hope you found this useful and informative. If you have any questions, please write your comments below.