Javascript - MouseOver Hints

In many applications, when the mouse moves over some user interface element, some kind of help (or hint) is displayed. In Delphi, these are referred to as hints - help is what is displayed when F1 is pressed. Typically, these are displayed in either a popup window or in the status bar.

Creating hints | Displaying hints | html tags | Example

Creating hints

These are a couple of examples that set hints - one is static and the other depends on the current value This is an example of the code that produces a hint - in Delphi, these strings were produced using a format statement that simplifies specifying how many decimal points to include. However, javascript is such a poor language I had to use the kludge shown below. I know I could just return the result without first assigning it to a variable, but this technique makes debug a lot easier with some languages. Therefore, I use it with all languages.

This is an example.

Displaying hints

This is the code that displays the hint. Since my code checks for both spellings (cases). Originally, I added an onmouseover event to every UI component with an associated hint. However, those events were not called when the components were disabled (read-only with a grey background). As a result, I attached a single onmouseover event to the page which causes the mcShowHint function to be called every time the mouse moves. If the UI element has an associated hint, then it is displayed, otherwise, the status bar is cleared. Luckily, this does not seem to cause a performance problem.

html tags

The final part is to define a place where the hints are displayed. This example places the hint in the last row of a table. (I included the entire application in the table - it provides a lot more control.) The style sheet controls the width and produces a sunken effect.


See Water_Vapor.html for an example of this is action.

Author: Robert Clemenzi
URL: http:// / Languages / Javascript / MouseOverHints.html