Show ToolTip message using CSS in Asp.Net
In this blog i am going to explain with example How to show tooltip guideline/instruction/message on mouse over in asp.net website using CSS(Cascade Style Sheets).
First of all in the design page(.aspx) add table(4*3) having First column for Lable, second column for textboxes and the last column for the help image over which user mouseover and will get tooltip as shown in image below:
Add the below code inside the <head> tag or create a separate CSS file and attach it tour aspx page. Here i am including in the same page. Add codes as below ::
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TextBoxToolTip.aspx.cs" Inherits="TextBoxToolTip" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.tooltipDemo
{
position: relative;
display: inline;
text-decoration: none;
left: 5px;
top: 0px;
}
.tooltipDemo:hover:before
{
border: solid;
border-color: transparent rgb(111, 13, 53);
border-width: 6px 6px 6px 0px;
bottom: 21px;
content: "";
left: 35px;
top: 5px;
position: absolute;
z-index: 95;
}
.tooltipDemo:hover:after
{
background: rgb(111, 13, 53);
border-radius: 5px;
color: #fff;
width: 150px;
left: 40px;
top: -5px;
content: attr(alt);
position: absolute;
padding: 5px 15px;
z-index: 95;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset style="width:450px;">
<legend>Tooltip example using CSS </legend>
<table>
<tr>
<td>
Name:
</td>
<td>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<a href="#" alt="Please Enter Your Name" class="tooltipDemo">
<asp:Image ID="Image1" runat="server" Height="25px" Width="25px" ImageUrl="~/images/help.png" /> </a>
</td>
</tr>
<tr>
<td>
Email Id:
</td>
<td>
<asp:TextBox ID="txtEmailId" runat="server"></asp:TextBox>
<a href="#" alt="Please Enter Your Email Id" class="tooltipDemo">
<asp:Image ID="Image2" runat="server" Height="25px" Width="25px" ImageUrl="~/images/help.png" /></a>
</td>
</tr>
<tr>
<td>
Username:
</td>
<td>
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
<a href="#" alt="Please Enter Your Username" class="tooltipDemo">
<asp:Image ID="Image3" runat="server" Height="25px" Width="25px" ImageUrl="~/images/help.png" /></a>
</td>
</tr>
<tr>
<td>
Password:
</td>
<td>
<asp:TextBox ID="txtPwd" runat="server" TextMode="Password"></asp:TextBox>
<a href="#" alt="Please Enter Your Password" class="tooltipDemo">
<asp:Image ID="Image4" runat="server" Height="25px" Width="25px" ImageUrl="~/images/help.png" /> </a>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</td>
</tr>
</table>
</fieldset>
</div>
</form>
</body>
</html>
First of all in the design page(.aspx) add table(4*3) having First column for Lable, second column for textboxes and the last column for the help image over which user mouseover and will get tooltip as shown in image below:
Add the below code inside the <head> tag or create a separate CSS file and attach it tour aspx page. Here i am including in the same page. Add codes as below ::
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TextBoxToolTip.aspx.cs" Inherits="TextBoxToolTip" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.tooltipDemo
{
position: relative;
display: inline;
text-decoration: none;
left: 5px;
top: 0px;
}
.tooltipDemo:hover:before
{
border: solid;
border-color: transparent rgb(111, 13, 53);
border-width: 6px 6px 6px 0px;
bottom: 21px;
content: "";
left: 35px;
top: 5px;
position: absolute;
z-index: 95;
}
.tooltipDemo:hover:after
{
background: rgb(111, 13, 53);
border-radius: 5px;
color: #fff;
width: 150px;
left: 40px;
top: -5px;
content: attr(alt);
position: absolute;
padding: 5px 15px;
z-index: 95;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset style="width:450px;">
<legend>Tooltip example using CSS </legend>
<table>
<tr>
<td>
Name:
</td>
<td>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<a href="#" alt="Please Enter Your Name" class="tooltipDemo">
<asp:Image ID="Image1" runat="server" Height="25px" Width="25px" ImageUrl="~/images/help.png" /> </a>
</td>
</tr>
<tr>
<td>
Email Id:
</td>
<td>
<asp:TextBox ID="txtEmailId" runat="server"></asp:TextBox>
<a href="#" alt="Please Enter Your Email Id" class="tooltipDemo">
<asp:Image ID="Image2" runat="server" Height="25px" Width="25px" ImageUrl="~/images/help.png" /></a>
</td>
</tr>
<tr>
<td>
Username:
</td>
<td>
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
<a href="#" alt="Please Enter Your Username" class="tooltipDemo">
<asp:Image ID="Image3" runat="server" Height="25px" Width="25px" ImageUrl="~/images/help.png" /></a>
</td>
</tr>
<tr>
<td>
Password:
</td>
<td>
<asp:TextBox ID="txtPwd" runat="server" TextMode="Password"></asp:TextBox>
<a href="#" alt="Please Enter Your Password" class="tooltipDemo">
<asp:Image ID="Image4" runat="server" Height="25px" Width="25px" ImageUrl="~/images/help.png" /> </a>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</td>
</tr>
</table>
</fieldset>
</div>
</form>
</body>
</html>
Output ::
Thank you for your help....
ReplyDelete