In this article I will explain with an example, how to add ToolTip to ASP.Net DropDownList Items (Options) using JavaScript and jQuery.
The ToolTip is dynamically added to each item by setting the HTML Title attribute of the each item (option) of the ASP.Net DropDownList using JavaScript and jQuery.
 
 
Add ToolTip to ASP.Net DropDownList Items using JavaScript
The following HTML Markup consists of an ASP.Net DropDownList. Inside the window onload event handler of the page, first the ASP.Net DropDownList is referenced and then a loop is executed over its items (options).
Inside the loop the value of the option (item) is fetched and set as Tooltip by setting it to the Title attribute of the option element.
<asp:DropDownList ID = "ddlCustomers" runat="server">
    <asp:ListItem Text="Please Select" Value="0" />
    <asp:ListItem Text="John Hammond" Value="1" />
    <asp:ListItem Text="Mudassar Khan" Value="2" />
    <asp:ListItem Text="Suzanne Mathews" Value="3" />
    <asp:ListItem Text="Robert Schidner" Value="4" />
</asp:DropDownList>
<script type="text/javascript">
    window.onload = function () {
        var ddlCustomers = document.getElementById("<%=ddlCustomers.ClientID %>");
        for (var i = 1; i < ddlCustomers.options.length; i++) {
            var title = "Customer ID: " + ddlCustomers.options[i].value;
            ddlCustomers.options[i].setAttribute("title", title);
        }
    };
</script>
 
 
Add ToolTip to ASP.Net DropDownList Items using jQuery
The following HTML Markup consists of an ASP.Net DropDownList. Inside the document ready event handler of the page, first the ASP.Net DropDownList is referenced and then a jQuery each loop is executed over its items (options).
Inside the loop the value of the option (item) is fetched and set as Tooltip by setting it to the Title attribute of the option element.
<asp:DropDownList ID = "ddlCustomers" runat="server">
    <asp:ListItem Text="Please Select" Value="0" />
    <asp:ListItem Text="John Hammond" Value="1" />
    <asp:ListItem Text="Mudassar Khan" Value="2" />
    <asp:ListItem Text="Suzanne Mathews" Value="3" />
    <asp:ListItem Text="Robert Schidner" Value="4" />
</asp:DropDownList>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=ddlCustomers] option").each(function (i) {
            if (i > 0) {
                var title = "Customer ID: " + $(this).val();
                $(this).attr("title", title);
            }
        });
    });
</script>
 
 
Browser Compatibility
The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Screenshot
Add ToolTip to ASP.Net DropDownList Items using JavaScript and jQuery
 
 
Demo
View Demo
 
 
Downloads
Download Code