How to show jQuery tooltip message on mouse over on asp.net controls

Introduction: In this article i am going to explain How to show/display tool tip message or we can say guideline instruction on mouse over on asp.net controls using jQuery. In previous articles i explained Show tool tip message using CSS and HTML and Highlight gridview row on mouse over using CSS and Implement Jquery form validations and Show Validation guidelines in web forms using JavaScript and jQuery to validate file extension and upload image file and Create drop down menu for login and signup using jQuery and CSS.

jQuery tooltip on mouse over in asp.net


Description: Tooltip is like a guideline instruction that helps the user to know what to enter in the fields on the form e.g. Registration form. It can be made to show tooltip message on any asp.net controls.  

Note: The jQuery will display the tool tip message that you provide in the Title attribute of asp.net controls.

Implementation: Let's create an asp.net sample web application to see the tooltip in action.
  • In the <Head> tag of design page (.aspx) paste the following:
<title>Tooltip demonstration using jQuery in Asp.net</title>
    <link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"> 
    <script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script> 
      <script type="text/javascript">
          $(function () {
              $(document).tooltip();
          }); 
    </script>  

  • Now in the <form> tag of the <body> tag design the page as:
<div>
    <fieldset style="width:260px;">
    <legend>Show Tooltip using jQuery in Asp.net 
    </legend>
    <table>
        <tr><td>Name: </td><td><asp:textbox id="txtName" runat="server" title="Please Enter Name"></asp:textbox></td></tr>
        <tr><td>Age: </td><td><asp:textbox id="txtAge" runat="server" title="Please Enter Age"></asp:textbox></td></tr>
        <tr><td>Email Id: </td><td><asp:textbox id="txtEmailId" runat="server" title="Please Enter Email Id"></asp:textbox></td></tr>
      <tr><td>Gender: </td><td>
            <asp:RadioButtonList ID="rblGender" runat="server" RepeatDirection="Horizontal" title="Select Gender">
            <asp:ListItem>Male</asp:ListItem>
            <asp:ListItem>Female</asp:ListItem>
            </asp:RadioButtonList>
        </td></tr>
        <tr><td>Address: </td><td><asp:textbox id="txtAddress" runat="server" title="Please Enter Address"></asp:textbox></td></tr>       
        <tr><td>City: </td><td>
            <asp:DropDownList ID="ddlCity" runat="server" Width="163px" title="Select your City">
                <asp:ListItem>-- Select City --</asp:ListItem>
            <asp:ListItem>Chandigarh</asp:ListItem>
            <asp:ListItem>Delhi</asp:ListItem>
            <asp:ListItem>Mumbai</asp:ListItem>
            </asp:DropDownList>
            </td></tr>
            <tr><td></td><td>
                <asp:Button ID="btmSubmit" runat="server" Text="Submit" /></td></tr>
    </table>
    </fieldset>
    </div>

Now run the application and take your mouse over the form fields and you will see the tooltip message on each field.

Now over to you:
" I hope you have got the trick to display tooltip message using jQuery 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 »

2 comments

Click here for comments
Anonymous
admin
May 21, 2014 ×

Thanks 4 the Demo.

Reply
avatar
May 22, 2014 ×

Your welcome..stay connected and keep reading for more useful updates like this..:)

Reply
avatar

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