Ep

Ep

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 :-

mouseover tooltip css javascript,display tooltip on mouseover jquery,display tooltip on mouseover html,show tooltip on hover css,show tooltip on hover c#,
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:00 PM Rating: 5

No comments:

All Rights Reserved by Etechpulse © 2012 - 2017
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.