Show Tooltip on Hover Css
Display tooltip on mouseover html
A Tooltip is a kind of pop up instruction or a message that is shown on mouse over of the asp control for a input control e.g. TextBox. In this article I will shared an example of how to show tooltip on mouse over in asp.net web application using #html and #CSS (Cascade Style Sheets). Find the working sample below :-
 |
| show tooltip on hover css |
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>Show Css tooltip on web page asp control</title>
<link href="tooltip.css" rel="stylesheet" type="text/css" />
<link href="table.css" rel="stylesheet" type="text/css" />
<link href="button.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="content">
<table cellspacing="0">
<tr>
<td colspan="2">
<b>Sample Form</b>
</td>
</tr>
<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 User name" 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" CssClass="styled-button-8" Text="Submit" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
ToolTip.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;
}
.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;
}
Download Code
I hope you will enjoy the asp.net development tips while creating HTML and CSS project. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome. Also If you like this article, don't forget to share this article with your friends and colleagues.
Show Tooltip on Hover Css
Reviewed by Ravi Kumar
on
5:42 PM
Rating:
Reviewed by Ravi Kumar
on
5:42 PM
Rating:
No comments: