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.
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:
<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:
<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."
2 comments
Click here for commentsThanks 4 the Demo.
ReplyYour welcome..stay connected and keep reading for more useful updates like this..:)
ReplyIf 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..