### 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
 ```Dew_Point = document.getElementById('Dew_Point'); Dew_Point.hint = "Radiosonde data reports how much the Dew Point is below the temperature"; Pressure_UImcSpinEdit.Hint = mcGetHint_mbar(Pressure_UImcSpinEdit.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.
 ```function mcGetHint_km(distance_km) { // return a hint string - used for fields where only one value is shown // conversion factors from google var str = round_2(distance_km) + ' km ' + round_2(distance_km * 3280.84) + ' ft ' + round_2(distance_km * 0.621371) + ' miles'; return str; } function mcGetHint_mbar(Pressure_mbar) { // return a hint string - used for fields where only one value is shown // conversion factors from google // 0.750061683 torr google // 0.75006375541921 Torr www.unitjuggler.com // 0.750061673821 torr www.convertunits.com // 14.695 948 775 5134 psi = 1 atm wikipedia // 14.50377 psi = 1 bar var str = round_2(Pressure_mbar) + ' mbar (hPa) ' + round_2(Pressure_mbar * 0.750061683) + ' torr (mmHg) ' + round_2(Pressure_mbar * 0.01450377) + ' psi'; return str; } function round_2(x){ return Math.round(x* 100)/100; } ```
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.

 ```5 km 16404.2 ft 3.11 miles ```

### Displaying hints

This is the code that displays the hint. Since
• In the existing Delphi code Hint is always upper case
• Delphi is not case sensitive
• Javascript is case sensitive
• And when I add new code (rather than converting Delphi code) I might use the other case
my code checks for both spellings (cases).
 ```// if an input field is disabled, then its onmouseover will not be called // this routine fixes that window.onload = function() { UIHints = document.getElementById('UIHints'); } function mcShowHint(UIPart) { if (UIPart.Hint !== undefined){UIHints.value = UIPart.Hint;} else if (UIPart.hint !== undefined){UIHints.value = UIPart.hint;} else UIHints.value = ''; } ```
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.


### Example

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

Author: Robert Clemenzi