Show item text or value as tooltip with dropdownlist items in asp.net

IntroductionIn this article I am going to explain how to dynamically add/show tool tip with each and every item(option) of asp.net dropdownlist. 

Show item text as tooltip with dropdownlist items in asp.netShow item value as tooltip with dropdownlist items in asp.net

Description:  We need to add 'Title' attribute to each item of dropdownlist by looping through the dropdownlist.
As we know there is a text and a value for each item of dropdownlist, we can show any of these two on tooltip by setting the text or value as a 'Title' attribute for each item as demonstrated in example below.

Implementation:  Let's take an example for demonstration purpose. For demonstration purpose I have binded the dropdownlist using Dictionary.
In actual application I assume it should be binded with the data fetched from the database.

In .aspx file add the following

<html>
<head runat="server">
       <title>Add tooltip to dropdownlist items</title>   
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <asp:DropDownList ID="ddlEmployee" runat="server">
            </asp:DropDownList>
    </div>
    </form>
</body>
</html>

In .aspx.cs code file add the following
protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindDropwnList();
        }
    }

    private void BindDropwnList()
    {
        Dictionary<intstring> EmployeeList = new Dictionary<intstring>();
        EmployeeList.Add(0, "-Select-");
        EmployeeList.Add(101, "Aashish Sharma");
        EmployeeList.Add(102, "Tarun Verma");
        EmployeeList.Add(103, "Sunidhi Chauhan");
        EmployeeList.Add(104, "Shivani Singh");
        EmployeeList.Add(105, "Arun Kashyap");
        ddlEmployee.DataSource = EmployeeList;
        ddlEmployee.DataValueField = "Key";
        ddlEmployee.DataTextField = "Value";
        ddlEmployee.DataBind();      

      // Adding tooltip to each item of dropdownlist
        foreach (ListItem li in ddlEmployee.Items)
        {
            if (Convert.ToInt32(li.Value) > 0) //Skip adding tooltip on first item i.e. on '--Select--'
            {
                //Add Item text as tooltip
                li.Attributes.Add("Title", li.Text);
                //To add Item value as tooltip comment above line and uncomment below line
                li.Attributes.Add("Title", "Employee Id: " + li.Value);
            }
        }
}

Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox. Stay tuned and stay connected for more technical updates.
Previous
Next Post »

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..