jQuery to show item text or value as tooltip with dropdownlist items in asp.net

IntroductionIn 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. 

jQuery to show item text as tooltip with dropdownlist items in asp.netjQuery to show item value as tooltip with dropdownlist items 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.
Previous
Next Post »

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..