October 18, 2001 - Using Stationary Tool Tips | WebReference

October 18, 2001 - Using Stationary Tool Tips

Yehuda Shiran October 18, 2001
Using Stationary Tool Tips
Tips: October 2001

Yehuda Shiran, Ph.D.
Doc JavaScript

Using tool tips is a good way to improve your application's user interface. One way to create a tool tip is with the window object's createPopup() method:

var oPopup = window .createPopup();
You populate the popup window properties by setting its body properties: innerHTML, and style. Let's position a marker somewhere and ask the user to click it. Here is the marker definition:

<DIV ID="zoomcontainer" STYLE="position:relative">
<IMG ID="mmarkerRight" SRC="marker.gif" WIDTH="10" HEIGHT="10" BORDER="0" 
  STYLE="position:relative; top:10; left:50">
</DIV>
When the user clicks the marker, we want to pop up a tool tip, showing the x-coordinate of the marker in inches. The x location of the marker is simply mmarkerRight.offsetLeft. In order to convert the pixel value to inches, we divide by the number of pixels per inch, iPixelToInchRatio. iPixelToInchRatio is computed from a hidden marker, ratiomarker, by going:

iPixelToInchRatio = ratiomarker.offsetLeft;
where ratiomarker is defined as follows:

<IMG ID="ratiomarker" CLASS="mmarker" 
  STYLE="visibility:hidden; left:1in; top:1in; position: absolute" SRC="marker.gif" 
  WIDTH="15" HEIGHT="15" BORDER="0">
Notice the position of the 1 inch above. Its offset in pixels (ratiomaker.offsetLeft) is equal to its offset in inches, as specified above by the STYLE's left attribute. It's better to limit the accuracy of the number we display in the popup window. For two decimal points, we can multiply by 100, round, and then divide back by 100. To summarize these operations, the location is determined by:

theText = Math.round((100 * mmarkerRight.offsetLeft)/iPixelToInchRatio)/100;
We populate the innerHTML of the tooltip by:

oPopupBody.innerHTML = theText + " in";
After setting the popup window's background color, border, font size, and font family, we just need to position the popup window and set its dimensions:

oPopup.show(mmarkerRight.offsetLeft + 5, mmarkerRight.offsetTop - 20, 60, 16, zoomcontainer);
Notice that we position it with respect to its parent, zoomcontainer. Click the marker below and observe the tool tip:




Here is the code:

<SCRIPT LANGUAGE="JavaScript">
<!--
function Init() {
  mmarkerRight.attachEvent("onmousedown", MouseDownHandler);
}
function MouseDownHandler() {
  if (event.button != 1) return;
  iPixelToInchRatio = ratiomarker.offsetLeft;
  oPopup = window.createPopup();
  oPopupBody = oPopup.document.body;
  theText = Math.round((100 * mmarkerRight.offsetLeft)/iPixelToInchRatio)/100;
  oPopupBody.innerHTML = theText + " in";
  oPopupBody.style.backgroundColor = "#ffff66";
  oPopupBody.style.border = "1 solid black";
  oPopupBody.style.fontSize = "12px";
  oPopupBody.style.fontFamily = "Courier New";
  oPopup.show(mmarkerRight.offsetLeft + 5, mmarkerRight.offsetTop - 20, 60, 16, zoomcontainer);
  return;
}
// -->
</SCRIPT>