Description :
in this example we explain that how to display tooltip on dropdown items using jquery and javascript. or how to add tooltip to asp.net dropdownlist items using jquery/javascript in asp.net.
suppose i have one dropdown and its items display the name of the employee now if i have to display also the employee code then how can i achieve because at a time only one datfield is displayed in dropdownlist items.
so to ahieve this type of facility to display employee name as well as employee code on items tooltip then we have to use javascript or jquery to display this.
so below example demostrate the display tooltip on dropdown items in asp.net using jquery or javascript.
Javascript Code :
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form
id="form1"
runat="server">
<asp:DropDownList ID = "drpEmployees" runat="server">
<asp:ListItem Text="Please Select
Employee" Value="0" />
<asp:ListItem Text="kirit"
Value="1"
/>
<asp:ListItem Text="rahul"
Value="2"
/>
<asp:ListItem Text="mukesh"
Value="3"
/>
</asp:DropDownList>
<script type="text/javascript">
window.onload = function () {
var
drpEmployees = document.getElementById("<%=drpEmployees.ClientID
%>");
for (var i = 1; i < drpEmployees.options.length; i++) {
var
title = "Customer ID: " +
drpEmployees.options[i].value;
drpEmployees.options[i].setAttribute("title", title);
}
};
</script>
</form>
</body>
</html>
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form
id="form1"
runat="server">
<asp:DropDownList ID = "drpEmployees" runat="server">
<asp:ListItem Text="Please Select Employee" Value="0" />
<asp:ListItem Text="kirit"
Value="1"
/>
<asp:ListItem Text="rahul"
Value="2"
/>
<asp:ListItem Text="mukesh"
Value="3"
/>
</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*=drpEmployees]
option").each(function (i) {
if
(i > 0) {
var
title = "EMP ID: " + $(this).val();
$(this).attr("title", title);
}
});
});
</script>
</form>
</body>
</html>
Nice articular
ReplyDeleteThank you for comment.. also visit blog for the updated post.
DeleteNice Post..
ReplyDelete