How to display tooltip for DropDownList each items in asp.net

asp.net dropdownlist item tooltip

DropDownList is an asp.net list web server control that allow users to select a single item at a time. dropdownlist ToolTip property allow us to set a text to display when mouse pointer hover over dropdownlist control. but many .net developers want to display unique tooltip for different list items.

DropDownList item has a property named Attributes and it has a method named Add(). by using this Add() method, we can add many attributes (css feature) to an item. so we can add a 'title' attribute and its value to an item. the title attribute display as a tooltip for specified item. we can loop through the dropdownlist items collection and add title attribute to all items and set attribute value to item text. finally dropdownlist display different tooltip for different items.

The following asp.net c# example code demonstrate us how can we display different tooltip for different items in an asp.net application.

dropdownlist-item-tooltip.aspx


<%@ Page Language="C#" AutoEventWireup="true"%>  
    
<!DOCTYPE html>
      
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    { 
        if(!Page.IsPostBack)
        {
            string[] birds = { 
                                 "Green Junglefowl",
                                 "Ceylon Junglefowl",
                                 "Chicken",
                                 "Common Pheasant",
                                 "Golden Pheasant",
                                 "Congo Peafowl"
                             };

            DropDownList1.DataSource = birds;
            DropDownList1.DataBind();
        }

        for (int i = 0; i < DropDownList1.Items.Count; i++)
        {
            DropDownList1.Items[i].Attributes.Add("title", DropDownList1.Items[i].Text);
        }
    }
</script>      
      
<html xmlns="http://www.w3.org/1999/xhtml">      
<head id="Head1" runat="server">      
    <title>asp.net dropdownlist item tooltip</title>
</head>      
<body>      
    <form id="form1" runat="server">      
    <div>      
        <h2 style="color:MidnightBlue; font-style:italic;">      
            asp.net example - dropdownlist item tooltip
        </h2>      
        <hr width="550" align="left" color="Gainsboro" />      
        <br /><br />
        <asp:DropDownList
            ID="DropDownList1"
            runat="server"
            AutoPostBack="true"
            Width="350"
            Font-Size="X-Large"
            >
        </asp:DropDownList>
    </div>      
    </form>      
</body>      
</html>

More asp.net examples