How to add tooltips to ASP.NET Controls

This post focus on  how we can add tooltips to asp.net controls.

Step 1. 

1. First of all create a new web form TryingTooltip.aspx  in current website.

2. Now Download the jQuery tooltip plugin in from http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

3. Copied the  jquery.tooltip.js  from the downloaded folder to Scripts folder of your project.

4. Then Add a Style File and rename it as jquery.tooltip.css  and put below content in it.

[css].tooltip
{
border: 1px solid;
background-color:Silver;
cursor:pointer;
width:15px;
}
[/css]

5. Include the style sheet and script files as below.

[html]<link href="Styles/jquery.tooltip.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.tooltip.js" type="text/javascript"></script>
[/html]

6. Add a Login Control

7. Now the beauty of this post add a span areas that containing tooltip text as follows:

[html]<span title="Please use your registered email ID">&nbsp;?&nbsp;</span>

<span title="Please enter your Password(minimum 8 characters)">&nbsp;?&nbsp;</span>
[/html]

Complete TryingTooltip.aspx

[html]<form id="form1" runat="server">
<div align="center" id="contentArea">
<fieldset style="width: 350px; height: 140px;">
<table border="0" cellpadding="3" cellspacing="3">
<tr>
<td colspan="2">
<b>Login</b>
</td>
</tr>
<tr>
<td align="right">
<asp:Label runat="server" Text="User Name -"></asp:Label>
</td>
<td align="left">
<asp:TextBox ID="txtUse" runat="server"></asp:TextBox>
<span title="Please use your registered email ID">&nbsp;?&nbsp;</span>
</td>
</tr>
<tr>
<td align="right">
<asp:Label runat="server" Text="Password - "></asp:Label>
</td>
<td align="left">
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" MaxLength="16" ></asp:TextBox>
<span title="Please enter your Password(minimum 8 characters)">&nbsp;?&nbsp;</span>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />&nbsp;
<asp:Button ID="btnReset" runat="server" Text="Reset" />
</td>
</tr>
</table>
</fieldset>
</div>
</form>
[/html]

On Page Load

Jquery Code Section

We simply call tooltip method in span(tooltip) controls.

[html]
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("span").tooltip();
});
</script>
[/html]

How it works

Share on Google Plus

About JK STACK

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.