Introduction: In this article I am
going to explain how to dynamically add /show tool tip with each and every
item(option) of asp.net dropdownlist using jquery.
In previous articles I have explained How to validate, upload, crop and store image in folder in asp.net using jquery and Insert item at first or last position in databound dropdownlist in asp.net c#,vb and Bind/populate hours, minutes and seconds in asp.net dropdownlist and Dropdownlist with checkboxes using jquery bootstrap multi select plugin and Bind state categories and cities sub categories in single dropdownlist in asp.net
In previous articles I have explained How to validate, upload, crop and store image in folder in asp.net using jquery and Insert item at first or last position in databound dropdownlist in asp.net c#,vb and Bind/populate hours, minutes and seconds in asp.net dropdownlist and Dropdownlist with checkboxes using jquery bootstrap multi select plugin and Bind state categories and cities sub categories in single dropdownlist in asp.net
Description: We need to
add HTML 'title' property to each item of dropdownlist by looping through the
dropdownlist using jquery.
As we know there is a
text and a value for each item of dropdownlist, we can show any of these two on
tooltip by setting the text or value as a 'title' property for each item as
demonstrated in example below.
Implementation: Let's take an example for demonstration
purpose. For demonstration purpose I have binded the dropdownlist using Dictionary.
In actual application I
assume it should be binded with the data fetched from the database.
In .aspx file add the
following
<html>
<head runat="server">
<title>Add tooltip to dropdownlist items</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("[id*=ddlEmployee] option").each(function (i)
{
if (i > 0) { //Skipping adding tooltip on
first item i.e. on '--Select--'
// Add Item text as tooltip
$(this).prop("title", $(this).text());
// To add Item value as tooltip comment above line and uncomment below line
//$(this).prop("title", "Employee Id: " +
$(this).val());
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlEmployee" runat="server">
</asp:DropDownList>
</div>
</form>
</body>
</html>
In .aspx.cs code file add the following
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindDropwnList();
}
}
private void BindDropwnList()
{
Dictionary<int, string> EmployeeList = new Dictionary<int, string>();
EmployeeList.Add(0, "-Select-");
EmployeeList.Add(101, "Aashish
Sharma");
EmployeeList.Add(102, "Tarun
Verma");
EmployeeList.Add(103, "Sunidhi
Chauhan");
EmployeeList.Add(104, "Shivani
Singh");
EmployeeList.Add(105, "Arun
Kashyap");
ddlEmployee.DataSource = EmployeeList;
ddlEmployee.DataValueField = "Key";
ddlEmployee.DataTextField = "Value";
ddlEmployee.DataBind();
}
Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox. Stay tuned and stay connected for more technical updates.
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..