Adding ToolTip for each List Item.
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 you can see in Figure1.
Figure 1
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 post.
Lest us say that we have a DropDownList that contains three list items.
Code 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.
Code 2
foreach (ListItem _listItem in this.DropDownList1.Items)
{
_listItem.Attributes.Add("title", _listItem.Text);
}
As you can see in the above code, we wrote a foreach loop to walk through the DropDownList item-by-item to add the title attribtue.
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 below code.
Code 3
DropDownList1.Attributes.Add("onmouseover", _
"this.title=this.options[this.selectedIndex].title");
if you view your code in a browser, right click on the page
and choose view source, take a look at the HTML generated
element for our DropDownList, in Code 4, note that a new
title attribute is added for each item in the list.
Code 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
The above figure shows you how our new tooltip works when the mouse goes over the list 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.
~ Abdulla AbdelHaq