Javascript MouseOver Hints

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