In this article I will explain how to show/display tool tip message or guideline
on mouse over on asp.net input controls using jQuery. eg. TextBox,
dropdown, radiobutton etc.
We
use tool-tip as a guideline to help user to enter valid data. Suppose in in
case of salary, we can show a message “Enter numeric Value” or “Don’t enter Character” etc.
Tool tip is very helpful with input
controls specifically such as: TextBox, dropdown, radiobutton.
The jQuery will display the tool tip message
that you provide in the Title attribute of asp.net controls.
Source
Code:
In the
<Head> tag of design page , Write following code:
<title>Tooltip 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>
Write
following Code in Body tag(Design Section of Page):
<div>
<fieldset style="width:260px;">
<legend><strong>Show Tooltip using jQuery
</strong>
</legend>
<table>
<tr><td> </td><td> </td></tr>
<tr><td>Name: </td><td><asp:textbox id="txtName"
runat="server"
title="Please
Enter Name"></asp:textbox></td></tr>
<tr><td>Departement: </td><td><asp:textbox id="txtDepartement"
runat="server"
title="Please
Enter Department"></asp:textbox></td></tr>
<tr><td>Email Id: </td><td><asp:textbox id="txtEmailId"
runat="server"
title="Please
Enter Email"></asp:textbox></td></tr>
<tr><td>Nationality: </td><td>
<asp:RadioButtonList ID="rblGender" runat="server" RepeatDirection="Horizontal" title="Select Nationality">
<asp:ListItem>Indian</asp:ListItem>
<asp:ListItem>NRI</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>
<tr><td> </td><td>
</td></tr>
</table>
</fieldset>
</div>
0 comments:
Post a Comment