Tooltip help in ASP.NET and .NET Windows Forms

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.

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.

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

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'

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:

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()">
	(?) 
</a>

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

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

• 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.