How to add ToolTip for DropDownList Items?

  
ToolTip-

ToolTip is a small piece of information, which is used to show some idea or information about control and control's functionality.  This is most important when we are using icons for performing the operations. In every application it plays very important role either for web applications or windows applications.

Generally it is invisible but when we put mouse over any control then related ToolTip automatically gets visible.

In this article, I am explaining - How to add ToolTip for DropDownList Items?

Generally DropDownList doesn't have any direct property or method to set ToopTip for DropDowbList items; here I am giving simple code to add ToopTip for DropDownList items.

Write this code in Page_Load() event-

 protected void Page_Load(object sender, EventArgs e)
    {
        foreach (ListItem  item in DropDownList1.Items)
        {
            //Adding ToolTip for each item of DropDownList
              item.Attributes.Add("title", "item - "+ item.Text );
        }
    }

In above code, I have used foreach loop to iterate each item of DropDownList. Here insidse loop, I am using Attributes.Add() method to add title (ToopTip) to each item.
    
    //Adding ToolTip for each item of DropDownList
   item.Attributes.Add("title", "item - "+ item.Text );

 Here "title" is client side property of controls, using this property ToolTip can be added for any controls.  Using Attributes.Add() method we can also add any other client side method to any control.
 
The output of this code will be this this-

Thanks

How to Add and Remove item in DropDownList using JQuery?

DropDownList – 

DropDownList is a control which is used for showing collection of items on the web page. We can bind DataSource to DropDownList control also, It has some inbuilt methods like Add () and Remove (), using these method we can perform Insertion and deletion operations on DropDownList's items. But these methods are server side methods.

In some of the cases we want to perform Insertion and deletion operation on DropDownList's items on client side means we don't want to perform server side functionality for this, In this article , I am explaining - How to Add and Remove item in DropDownList using JQuery?

For this, I have designed page like this-

.aspx code-
<table>
                <tr>
                    <td>
                        <asp:Button ID="btnAdd" runat="server" Text="Add Item" OnClientClick="return funInsert();" />
                    </td>
                    <td colspan="2" align="center">
                        <asp:DropDownList ID="drpList" runat="server" Width="100">
                            <asp:ListItem Value="1">a</asp:ListItem>
                            <asp:ListItem Value="2">b</asp:ListItem>
                            <asp:ListItem Value="3">c</asp:ListItem>
                        </asp:DropDownList>
                    </td>
                    <td>
                        <asp:Button ID="btnDelete" runat="server" Text="Remove Item" OnClientClick=" return funDelete();" />
                    </td>
                </tr>
 </table>


Now to perform insertion and deletion operation on DropDownList's Items, I have defined two client side functions-

1. funInsert() - For Insertion operation
2. funDelete() - For deletion operation
 
   <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //Function to insert item to DropDownList
        function funInsert() {
            var item = prompt("Enter Item to add- ");
            if (item == null) {
                alert("First enter item");
            }
            else {
                var count = $("#<%= drpList.ClientID  %> option ").length;

                //Adding item to DropDownList
                $("#<%= drpList.ClientID %>").append("<option value=" + (parseInt(count) + parseInt(1)) + ">" + item + " </option>");
            }
            return false;
        }

        //Function to remove item from DropDownList
        function funDelete() {
            var count = $("#<%= drpList.ClientID  %> option ").length;
            if (count == 0) {
                alert("No item to remove");
            }
            else {
                //Removing item from DropDownList
                $("#<%= drpList.ClientID %> option[value=" + count + "]").remove();
            }

            return false;
        }
    </script> 

In above code, to perform Insertion operation on items, I have defined funInsert() function.
Here for inserting new item, I am prompting the user for entering new item as input using prompt ().

Like this-

After getting input from user, I am inserting this item to the DropDownList using append () method.

Like this-

  //Adding item to DropDownList
                $("#<%= drpList.ClientID %>").append("<option value=" + (parseInt(count) + parseInt(1)) + ">" + item + " </option>");

   Here "item" is variable which is representing entered item by user. After executing this code item will be added to DropDownList.

Like this-

In image you can see newly added item.

 Now to delete item from DropDownList, I have defined one client side function-   funDelete().
 In this function, I have written code to delete last item from the DropDownList. For this first I am getting count of items as "count" variable.

To delete item I have used this code-

  //Removing item from DropDownList
                $("#<%= drpList.ClientID %> option [value=" + count + "]").remove();

Here I have used remove() method, For this first I have got last item using JQuery and deleted that item using remove() method.

Like this-
 

You can see image last item- "New Item4" has been deleted from the DropDownList.

Note- I have used JQuery for this functionality, so it is must that JQuery plug-in should be included on the page, like I have included on top of the page.


Thanks