Add ToolTip to ASP.Net DropDownList Items Using jQuery

Add tooltip to dropdown options using jQuery.

In this blog will explain with an example, how to add ToolTip to ASP.Net DropDownList Items (Options) using 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 jQuery.

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.

<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*=ddlfruits] option").each(function (i) {
if (i > 0) {
var title = "Fruits ID: " + $(this).val();
$(this).attr("title", title);
}
});
});
</script>
<asp:DropDownList ID="ddlfruits" runat="server">
<asp:ListItem Text="Please Select" Value="0" />
<asp:ListItem Text="Mango" Value="1" />
<asp:ListItem Text="Apple" Value="2" />
<asp:ListItem Text="Grapes" Value="3" />
<asp:ListItem Text="Orange" Value="4" />
</asp:DropDownList>

The result will look like this