<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
//Using for
loop
//$("select").click(function
() {
// var s = this;
// for (i = 0; i < s.length; i++)
// s.options[i].title = s.options[i].text;
// if (s.selectedIndex > -1)
// s.onmousemove = function () { s.title =
s.options[s.selectedIndex].text; };
//});
//OR
//Using jquery
each loop
$("select").click(function () {
var s = this;
$("select option").each(function () {
$(this).attr("title", $(this).val());
});
if (s.selectedIndex > -1)
s.onmousemove = function () { s.title =
s.options[s.selectedIndex].text; };
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>Select State</asp:ListItem>
<asp:ListItem>Andhra Pradesh</asp:ListItem>
<asp:ListItem>Arunachal Pradesh</asp:ListItem>
<asp:ListItem>Assam</asp:ListItem>
<asp:ListItem>Bihar</asp:ListItem>
<asp:ListItem>Chattisgarh </asp:ListItem>
<asp:ListItem>Goa</asp:ListItem>
<asp:ListItem>Gujarat</asp:ListItem>
<asp:ListItem>Haryana</asp:ListItem>
<asp:ListItem>Himachal Pradesh </asp:ListItem>
<asp:ListItem>Jammu and Kashmir</asp:ListItem>
<asp:ListItem>Jharkhand</asp:ListItem>
<asp:ListItem>Karnataka</asp:ListItem>
<asp:ListItem>Kerala </asp:ListItem>
<asp:ListItem>Madhya Pradesh</asp:ListItem>
<asp:ListItem>Maharashtra </asp:ListItem>
<asp:ListItem>Manipur</asp:ListItem>
<asp:ListItem>Meghalaya</asp:ListItem>
<asp:ListItem>Mizoram</asp:ListItem>
<asp:ListItem>Nagaland </asp:ListItem>
<asp:ListItem>Odisha </asp:ListItem>
<asp:ListItem>Punjab </asp:ListItem>
<asp:ListItem>Rajasthan</asp:ListItem>
<asp:ListItem>Sikkim </asp:ListItem>
<asp:ListItem>Tamil Nadu </asp:ListItem>
<asp:ListItem>Telengana</asp:ListItem>
<asp:ListItem>Tripura</asp:ListItem>
<asp:ListItem>Uttar Pradesh </asp:ListItem>
</asp:DropDownList>
</div>
</form>
</body>
</html>
Output
Alternatively You can use the following code in
code behind page to show tooltip in Asp.net DropDownList Control.
Note:- Use this code after where DropDownList bind completed.
for (int i = 0; i <
DropDownList1.Items.Count; i++)
{
DropDownList1.Items[i].Attributes.Add("title",
DropDownList1.Items[i].Text);
}
