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

How to add custom filter lookup field based on OptionSet field selection in Dynamics CRM.

go to top image