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.