Click here to Skip to main content
11,921,898 members (65,511 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


11 bookmarked

Help Technique in Web Applications

, 23 Aug 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
Help Technique in Web applications


“Help” is the most important part of our web applications, as mostly we don’t notice it, but sometimes it plays a very big role for saving our time and work.

Suppose a button has only an image, many times we are not able to understand what it means but when we place the mouse pointer over it, it shows the usage of that as a tooltip, which is a part of web help technique.

Many times, when we read a topic that contains special words, definition then don’t we have to search on the net about it, we just click and a small window opens with the description - this is also a part of “help” for web applications.

So here I'm going to explain some techniques about “How to add help to web applications”.

Displaying ToolTips

ToolTip is a very basic and very important part of the web, as I discussed in the introduction.

"Suppose a button has only an image, many times we are not able to understand what it means but when we place the mouse pointer over it, it shows the usage of that as a tooltip".


Tooltip shows at runtime, almost all "server" controls having this (tooltip) property inbuilt.

One important thing about tooltip is that Internet Explorer dosn’t accept the "tooltip" property of ASP.NET controls; it takes this property as "title".

In HTML controls, you have to use the "title" property instead of "tooltip" for controls to show the help.

Server control_


<asp:ImageButton runat="server" ID="imgbutton" 

ToolTip="This is an eye,Click here to enter in web" ImageUrl="~/Lilac_by_KinkyPink.jpg"/>



Html control_


<input type="image" title="This is an amazing eye" runat="server" 

src="Lilac_by_KinkyPink.jpg" style="height: 46px; width: 64px"/>


The output will look the same as server control.

Displaying Help in a Popup Window

Sometimes while discussing a long term, we use some keywords that include long definitions and it is difficult to understand for a newbie. For this purpose, a popup window can be used for help purposes, it can be an HTML page or an .aspx page-depending on your requirement.


<a href="#" onclick="'procedure.htm','popup','left = 900 height=200,
return(false);"> Procedure </a>are the most important topic of SQL.


We have used # in href to give the current page reference and we used an onclick to open a new window "procedure.htm" which we have already created.

"Left = 900" is the pop window position and further are some properties.

Here procedure keyword is a link and the rest are simple chars.


When you click on the "Procedure" keyword, it will open a new window containing the text entered in that page "procedure.htm" by you.

Try it.


If you have HTMLHELP.chm created in your system, then a simple link can be used to pop it up any time.

Download "HTML Help Workshop" for this type of help facility.

You can download it from the following link for free:


Now follow these steps to create an HTML help workshop for a project, website, etc.

Starts - All Programs - HTML Help Workshop - HTML Help Workshop


Now click on the "New" toolbar.

A new window will open like this:


Select Project, then click OK button.


Click on the next button to proceed.


Browse the location where you want to create the file, just give a name and click open.

Click on the next button again.


Don't check any check box if you haven't created any file.

Click on the next button and then click on the finish button, then a new window will appear like this.


Just use these buttons to make your help project.

When you have done all the editing for creating help project, click on this "Compile HTML file" button and then give the path of that .hhp file.


Compile the project.


Now see that a helpfile.chm has been created in that location.



We learned how to use Help techniques for web applications.


  • 23rd August, 2010: Initial post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Technical Writer Fast-Get
India India
Nikhil is a Microsoft MCTS and MCP.
developed many websites.
interested in web designing and modifying things with

You may also be interested in...

Comments and Discussions

GeneralCouple of things Pin
Jose Menendez Póo23-Aug-10 9:03
mvpJose Menendez Póo23-Aug-10 9:03 
First, I consider ToolTips more of a usability affair, but still valid. Using the HTML title attribute to show tooltips is a little risky, because people usually miss them; why? because it delays from 1 to 2 secs to popup, depending on the browser.

Secondly, beware of using href="#", because this may result on a page reload on some browsers. Is better to use href="javascript:void(0)" to nullify the link click default behavior.

Always good to see people working hard on sw help topics.

GeneralRe: Couple of things Pin
NikhilJohari23-Aug-10 22:13
memberNikhilJohari23-Aug-10 22:13 
GeneralNice topic Pin
Md. Marufuzzaman23-Aug-10 4:19
mvpMd. Marufuzzaman23-Aug-10 4:19 
GeneralRe: Nice topic Pin
NikhilJohari23-Aug-10 22:14
memberNikhilJohari23-Aug-10 22:14 
GeneralRe: Nice topic Pin
Md. Marufuzzaman23-Aug-10 22:25
mvpMd. Marufuzzaman23-Aug-10 22:25 
GeneralLooks good... Pin
Sandeep Mewara23-Aug-10 2:07
mentorSandeep Mewara23-Aug-10 2:07 
GeneralAlmost there Pin
Mark Nischalke22-Aug-10 4:45
mvpMark Nischalke22-Aug-10 4:45 
GeneralRe: Almost there Pin
NikhilJohari23-Aug-10 22:15
memberNikhilJohari23-Aug-10 22:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.151120.1 | Last Updated 23 Aug 2010
Article Copyright 2010 by NikhilJohari
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid