How to show tool tip message using CSS and HTML in asp.net website


show tool tip message in asp.net wesite using CSS and HTML
Introduction: In previous articles i explained How to Highlight gridview row on mouse over using CSS in asp.net and How to show Validation guidelines in web forms using JavaScript in Asp.net and  How to bind gridview and highlight gridview row on mouse over in asp.net  and Implement Jquery form validations  and Create and consume WCF Services and Create crystal reports in visual studio 2010 . In this article I am going to explain with example How to show tooltip guideline/instruction/message on mouse over in asp.net website using HTML and CSS(Cascade  Style Sheets). CSS is used to control the style and the layout of multiple web pages all at once.

Description: A Tooltip is a kind of pop up guideline/instruction/message that is shown whenever user hover the mouse over the control e.g. TextBox. Hover means moving/placing/holding the mouse over something without clicking it. Tooltip will work as a guideline for the user showing what to enter in the TextBox.  
I will demonstrate this concept in 2 ways:

1) Using Style sheet(External Style Sheet)
2) Using internal Style Sheet

Implementation: Let’s understand the first way i.e. showing tool tip in asp.net website using External Style Sheet.

Step 1: Open Visual Studio ->File menu -> New ->Web site -> Select your preferred language from the Templates in the left pane (Visual Basic or Visual C#). Select ASP.NET Empty Website.

Step 2: Give name and location to your website and Click Ok.

Step 3: Go to Website menu -> Add New Item -> Web Form ->Add. It will create a default.aspx page under your website in solution explorer.

Step 4: In the <BODY> tag of the design page(default.aspx)  place 4 TextBox controls and a Button Control as:

HTML Source Code

<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" />
            </td>
        </tr>
    </table>
        </fieldset>   
    </div>
    </form>

show tool tip message in asp.net wesite using CSS and HTMLStep 5: Now it’s time to create the Tooltip for the TextBoxes on the form. We need to Add a StyleSheet in our project. So go to Website menu ->Add New Item ->Select StyleSheet as shown in figure. 

 
It will add a StyleSheet.css under your website project in solution explorer.


Step 6: Open StyleSheet.css and paste the following in it.

  .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;           
        }

Step 7: Now we have to add the reference of this StyleSheet.css in the page where we want to show the tooltip e.g. default.aspx

Step 8: So in the <HEAD> tag of default.aspx write the line to link the StyleSheet.css with the page as mentioned below:
  <link href="StyleSheet.css" rel="stylesheet" />
Or you can also drag and drop the StyleSheet.css from the solution explorer in the <HEAD> tag of default.aspx. It will also create the same line mentioned above

Step 9: Now run the web site and mouse hover the textboxes. Tool tips will pop-up as shown in the very first image of this article.

Now Let’s understand the second way i.e. showing tool tip in asp.net website using internal style Sheet.

If you don’t want to create an external Style Sheet that we created in this article(StyleSheet.css) then  exclude or delete the StyleSheet.css and also comment out or remove the link <link href="StyleSheet.css" rel="stylesheet" /> from the <HEAD> section of the default.aspx page .

Now Copy all the contents from the StyleSheet.css and paste in the <HEAD> tag of the default.aspx page as:

<style type="text/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;           
        }       
    </style>

Now over to you:
"If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates."
Previous
Next Post »

6 comments

Click here for comments
Unknown
admin
June 10, 2013 ×

nice article

Reply
avatar
Anonymous
admin
September 26, 2013 ×

thank you :)

Reply
avatar
September 26, 2013 ×

Your welcome..keep reading for more useful updates..

Reply
avatar
king
admin
October 05, 2013 ×

thanks plz add me in fb i need some help sir for a project sir plz

Reply
avatar
Anonymous
admin
June 19, 2014 ×

Thanks buddy good job

Reply
avatar
June 21, 2014 ×

Thanks for appreciating my work..it is always nice to hear that my articles helped any one..Stay connected and keep reading..

Reply
avatar

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..