Introduction: In previous articles i explained How to Highlight gridview row on mouse over using CSS in asp.net and How to show Validation guidelines in web forms using JavaScript in Asp.net and How to bind gridview and highlight gridview row on mouse over in asp.net and Implement Jquery form validations and Create and consume WCF Services and Create crystal reports in visual studio 2010 . In this article I am going to explain with example How to show tooltip guideline/instruction/message on mouse over in asp.net website using HTML
and CSS(Cascade Style Sheets). CSS is used to control the style and the layout of multiple web pages
all at once.Description: A Tooltip is a kind of pop up guideline/instruction/message that is shown whenever user hover the mouse over the control e.g. TextBox. Hover means moving/placing/holding the mouse over something without clicking it. Tooltip will work as a guideline for the user showing what to enter in the TextBox.
I will demonstrate this concept in
2 ways:
1) Using Style sheet(External Style Sheet)
2) Using internal Style Sheet
Implementation: Let’s understand the first way i.e. showing
tool tip in asp.net website using External Style Sheet.
Step 1:
Open Visual Studio ->File menu -> New ->Web site -> Select your
preferred language from the Templates in the left pane (Visual Basic or Visual
C#). Select ASP.NET Empty Website.
Step 2:
Give name and location to your website and Click Ok.
Step 3:
Go to Website menu -> Add New Item -> Web Form ->Add. It will create a
default.aspx page under your website in solution explorer.
Step 4:
In the <BODY> tag of the design page(default.aspx) place 4 TextBox controls and a Button Control
as:
HTML Source Code
<form id="form1" runat="server">
<div>
<fieldset style="width:420px;">
<legend>Tooltip
using CSS in Asp.net </legend>
<table>
<tr>
<td>
Name:
</td>
<td>
<a href="#" alt="Please
Enter Name" class="tooltipDemo">
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</a>
</td>
</tr>
<tr>
<td>
Email Id:
</td>
<td>
<a href="#" alt="Please
Enter Email Id" class="tooltipDemo">
<asp:TextBox ID="txtEmailId" runat="server"></asp:TextBox>
</a>
</td>
</tr>
<tr>
<td>
Username:
</td>
<td>
<a href="#" alt="Please
Enter Username" class="tooltipDemo">
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
</a>
</td>
</tr>
<tr>
<td>
Password:
</td>
<td>
<a href="#" alt="Please
Enter Password" class="tooltipDemo">
<asp:TextBox ID="txtPwd" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</td>
</tr>
</table>
</fieldset>
</div>
</form>
Step 5: Now it’s time
to create the Tooltip for the TextBoxes on the form. We need to Add a
StyleSheet in our project. So go to Website menu ->Add New Item ->Select StyleSheet as shown in figure.
It will
add a StyleSheet.css under your website project in solution explorer.
Step 6: Open
StyleSheet.css and paste the following in it.
.tooltipDemo
{
position: relative;
display: inline;
text-decoration: none;
left: 5px;
top: 0px;
}
.tooltipDemo:hover:before
{
border: solid;
border-color: transparent #FF8F35;
border-width: 6px 6px 6px 0px;
bottom: 21px;
content: "";
left: 155px;
top: 5px;
position: absolute;
z-index: 95;
}
.tooltipDemo:hover:after
{
background: #FF8F35;
background: rgb(255, 143, 53);
border-radius: 5px;
color: #fff;
width: 150px;
left: 160px;
top: -5px;
content: attr(alt);
position: absolute;
padding: 5px 15px;
z-index: 95;
}
Step
7: Now we have to add the reference of this StyleSheet.css in the page
where we want to show the tooltip e.g. default.aspx
Step
8: So in the <HEAD> tag of default.aspx write the line to link
the StyleSheet.css with the page as mentioned below:
<link href="StyleSheet.css" rel="stylesheet" />
Or
you can also drag and drop the StyleSheet.css from the solution explorer in the
<HEAD> tag of default.aspx. It will also create the same line mentioned
above
Step 9: Now run the
web site and mouse hover the textboxes. Tool tips will pop-up as shown in the
very first image of this article.
Now Let’s understand the second way i.e.
showing tool tip in asp.net website using internal style Sheet.
If you don’t want to create an
external Style Sheet that we created in this article(StyleSheet.css) then exclude or delete the StyleSheet.css and also
comment out or remove the link <link href="StyleSheet.css" rel="stylesheet" />
from the
<HEAD> section of the default.aspx page .
Now Copy all the contents from
the StyleSheet.css and paste in the <HEAD> tag of the default.aspx page
as:
<style type="text/css">
.tooltipDemo
{
position: relative;
display: inline;
text-decoration: none;
left: 5px;
top: 0px;
}
.tooltipDemo:hover:before
{
border: solid;
border-color: transparent #FF8F35;
border-width: 6px 6px 6px 0px;
bottom: 21px;
content: "";
left: 155px;
top: 5px;
position: absolute;
z-index: 95;
}
.tooltipDemo:hover:after
{
background: #FF8F35;
background: rgb(255, 143, 53);
border-radius: 5px;
color: #fff;
width: 150px;
left: 160px;
top: -5px;
content: attr(alt);
position: absolute;
padding: 5px 15px;
z-index: 95;
}
</style>
Now over to you:
"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."
6 comments
Click here for commentsnice article
Replythank you :)
ReplyYour welcome..keep reading for more useful updates..
Replythanks plz add me in fb i need some help sir for a project sir plz
ReplyThanks buddy good job
ReplyThanks for appreciating my work..it is always nice to hear that my articles helped any one..Stay connected and keep reading..
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..