<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="Show_tooltips.aspx.cs"
Inherits="Show_tooltips"
%>
<!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
#C71585;
border-width: 6px 6px 6px 0px;
bottom: 21px;
content: "";
left: 155px;
top: 5px;
position: absolute;
z-index: 95;
}
.tooltipDemo:hover:after
{
background: #C71585;
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>
</head>
<body>
<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"
onclick="btnSubmit_Click"
/>
</td>
</tr>
</table>
</fieldset>
</div>
</form>
</body>
</html>
No comments:
Post a Comment