Programmatically Creating Context-Sensitive Help on a Web Page

In last week's article, Creating Context-Sensitive Help on a Web Page, we looked at how to associate rich help "tooltips" with certain regions in the browser. With a bit of client-side JavaScript and HTML markup, this previous article illustrated how to have a help window with images and rich text appear when mousing over an image or specific text. Such context-sensitive help is a great way to include extra information or a more detailed explanation of data on a web page in a space-saving manner.

Last week's article aimed to simply lay the ground work for creating a context-sensitive help system and, as such, had a few shortcomings. Most noticeably, the help window appeared immediately when mousing over its associated region and disappeared immediately after mousing out of that region. This behavior introduced two usability issues: first, when moving the mouse over the screen, if you happened to pass over a help region the help window appeared, which could be jarring; second, if a help window contained links or was lengthy enough to require scrolling, when attempting to move the mouse from the help region to the help window, the mouse would leave the help region and the help window would disappear.

In addition to these two end user usability problems, the context-sensitive help system presented last week wasn't very user friendly for us, the page developer. All of the script and <div> and <iframe> elements needed to be manually added to the web page to define the help windows and the onmouseover and onmouseout event handlers for the help region. Ideally, all of the necessary script and markup could be added programmatically, with a single line of code from the ASP.NET code-behind class.

In this article we'll see how to improve upon the rudimentary context-sensitive help system from last week by fixing the aforementioned usability concerns and by creating an ASP.NET 2.0 class with methods to programmatically add the help windows and needed script for a given help region. Read on to learn more!

If you've not yet read Creating Context-Sensitive Help on a Web Page, please do so before continuing with this article...
Read More >

Read More...

Comments

Post Your Comment:

Your Name:*

e-mail ID:(required for notification)*

Image Verification: 

 

 Subscribe