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>


Output ::


Comments

Post a Comment

Popular posts from this blog

How to show enlarge image when mouse hover on image or link in Asp.Net(c#) using JavaScript

StateCode and StatusCode Values for mostly used entities in Microsoft Dynamics CRM 2013

Search data in Gridview on Textbox Key press event using JQuery in Asp.Net- C#

go to top image