DropDownList with tooltip

I recently got this question from a customer whom is binding some data to a DropDownList control inside a GridView; the various items inside the DropDownList has variable length while the control itself per their page resign requirements must be fixed, making it difficult to fully read and understand the text associated with the selected item, so the customer asked for some hints to add a tooptip functionality to the DropDownList. Before raising the call he had already searched the Internet but without much luck; I did the same myself and apparently there are plenty of samples showing how to display a tooltip when the mouse is over an item already selected in a DropDown control, but the customer wanted something different: he needed to show the tooltip over each item in the DropDownList before actually selecting them to help users make the appropriate selection.

Well, for Internet Explorer 7 (al later) it is possible to use the “Title” attribute for the <option> tag:

for (int i = 0; i < GridView1.Rows.Count; i++)
{
    //Add logic to fill the GridView

    //Now let's iterate through the DropDown controls to add a "Title" to the
    //resulting HTML "<option>" elements: this will add the toolip to highlighted element
    for (int i2 = 0; i2 < dropDownList.Items.Count; i2++)
    {
        dropDownList.Items[i2].Attributes.Add("Title", dropDownList.Items[i2].Text);
    }
}

Here is how it looks like in IE7:

Even if Firefox (at least the version I’ve tried) does not respect the control width we have set through CSS and the DropDown for this sample is large enough to read the complete text, the tooltip is displayed:

Unfortunately this is not supported by previous versions if IE, though… if anyone has a suggestion, feel free to add a comment! ?

Carlo

Quote of the day:

Calamities are of two kinds: misfortunes to ourselves, and good fortune to others. – Ambrose Bierce