Write For Us

Tooltip help in ASP.NET and .NET Windows Forms

Who are you?

You produce high quality Web or Windows applications but you suffer from that your applications have much small market share if compared to lower quality competitive applications?


You waste resources on supporting the customers of your applications much more the resources you used to produce the entire application itself?

Your customers typically complain that they are unable to take the full advantage of your applications features and that the value your promised them is not that efficient?

If you are any of those above, then please read on ... Providing friendly help can be a simple, yet intelligent, saver from these nightmares.

Why help?


Experience shows that developers typically don't care much about providing help for the applications they produce. Although this can be due to several reasons, we are interested here in one specific reason: Developers typically think that their applications can be easily understood and that no one will have any problem at all to learn their applications as they use them. Although this may be correct for a limited class of applications, experience shows that it's incorrect at all for most of applications classes. Even if we assumed this is correct, after all, this is the point of view of the developer who produced the application and certainly he is confident 'he' can use it well.

What we care much about here is the actual users of this applications who are are our real target. Being able to use his application easily, this should not make us think that this developer did a good job and that his application is actually self descriptive. This is not only because he is the one who developed it and it's natural that the application is easy for him, but more importantly because even the average user of any application is much less experienced than the developer who produced it --- not to mention the users below the average in their application usage skills.

In this tutorial we are going to present you a set of effective, yet simple, techniques that you can employ to achieve valuable attraction factors for your applications by providing your users the sufficient help they need to effectively use it.

The simplest and most effective approach: ToolTips


You may notice that in several applications or websites, and when you position your mouse pointer over 'something' on your screen for a while, a small yellow and rectangle showing some valuate text by which you can figure out what this 'thing' stands for. This rectangle is simply called a ToolTip. For example, at Microsoft's website you will see that yellow rectangle shown in figure 1 below.


Microsoft web site

Figure 1


The interesting issue about ToolTips is that they solve the old problem of eliminating help to conserve screen space. ToolTips does not occupy any area at all when they are not shown and in the same time when mouse pointer goes beyond it's specified area or when few seconds elapse, the ToolTip automatically disappear.

We will show you now how to display these ToolTpis in your Windows Applications as well as in your Web Applications.

For ASP.NET Web Applications: (Download ToolTip Example 1)


For most of server controls, the problem is already solved. Each of these controls has a property named ToolTip which can be set to any string that you need to appear as a ToolTip when users visit your website.

For example, you can draw a Button on your form and then set it's ToolTip property via the properties window at design time as follows:


Figure 2


  • When your users will later visit your website, they will see the following ToolTip on that button:


    Figure 3

Note that it is possible to insert only plain text in tooltips. If you need more designer options you can try AspLib Tooltip control which supports formatted text, using of AJAX, images, hyperlinks, CSS styles, skins etc. Used on right way, this kind of help can be very impressive to your web application's users.

For .NET Windows Forms Applications: (Download ToolTip Example 2)


The same ToolTip concept do exist in Windows Applications as well but the implementation is a little different.

If you performed the same steps we mentioned in the Web Application above, you will be faced by a strange fact: Controls in Windows applications have no ToolTip property! But to be more precise, we have to say: Controls in Windows applications have no ToolTip property by default. In other words you need to provide these controls by the ToolTip property before you can actually take it's benefits and this can be simply performed by adding a ToolTip component to your form. Let's try it ourselves:

From your toolbox get a ToolTip component and drop it into your form as shown in the following figure.


Figure 3


This way, and after adding this component you will notice that your button (and typically any other control) has it's ToolTip property added but with a slightly different name: 'ToolTip on ToolTip1'

You know what to do next, simply proceed as we did in the above Web Application then run / test your Windows Application.

Greedy? Want to have more space for your help?


As you can see while experimenting with ToolTips, they are a powerful and simple technique that is unusable at all when we it comes to providing help in the form of complete and long paragraphs / pages.

You need to use a set of totally different techniques to provide help that is composed of long paragraphs and complete pages. Your users will thank you very much if you gave them the ability to display help in your application and in the same time to see the user interface of your application. This way they can contrast what they are reading inside this help with the actual user interface of your application. Here's how:

For ASP.NET Web Applications: (Download Example 3)


Assume we need to show a question mark (?) beside our 'Average' button in the previous examples and that we need our help to be shown in another window when this question mark (?) is clicked. This can be simply achieved by adding the following code to our form's code immediately after the code of the 'Average' button:

<a href="#" onclick="window.open('HelpFile.aspx', 'AnotherHelpWindow').focus()">

Figure 4


Let's analyze the code in figure 5:

  • <a: This is simply the beginning of the famous HTML Anchor tag (<a> ... </a>)

  • 'HelpFile.aspx': This is the name of the file that contains the help we want to show in a separate window. This is simply an HTML file created in whatever method you like.

  • 'AnotherHelpWindow': This is an arbitrary name by which we name the window inside which our help will appear. You can reuse this window later to show different help by reusing this same exact name again.

  • .focus(): The use of this method causes the new help window to have the focus as it appears on the top of your Web Application.

  • (?): This is simply the text that will appear in in your application and when clicked the window that shows the help will appear as well.

  • </a>: The end of the '<a>' tag described above.

When you run this application, here's what you will see:


Figure 5


And when you request detailed help about average calculation (by clicking the '(?)') here's the different window that will appear showing you this help.


Figure 6

For .NET Windows Forms Applications: (Download HelpProvider Example)


Here we will use a component called HelpProvider to achieve a somewhat similar effect.

Drag a HelpProvider component into your form as in the following figure:


Figure 7


This will cause the property of 'HelpString on HelpProvider1' to appear for our 'Average' button and you can set it to whatever text you want.

When you run the application and press F1 while the 'Average' button having the focus you will see the following:


Figure 8

For further information


  • A totally different and sophisticated technique for providing help is the use of Microsoft HTML Help Workshop. For more details about Microsoft HTML Help Workshop please visit Microsoft Help Technologies Start Page.

  • Refer to the online copy of Microsoft Developers Network at http://msdn.microsoft.com or use you own local copy of MSDN.

Tutorial toolbar:  Tell A Friend  |  Add to favorites  |  Feedback  |   

comments powered by Disqus