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

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
OpenOffice 3.2 Lands Amid Critical Changes
Red Hat, IBM Firmly in KVM Virtualization Camp
Red Hat Talks Up Open Source Cloud Plans

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>

People who read this tip also read these tips:

Look for similar tips by subject:


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
Installing and Using Meeplace, the Business Review CMS · Sending an HTML and Plain Text E-newsletter with ASP.NET, Part 2 · Create Multilingual Web Sites with Windows Unicode Fonts
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
MySql View Technique for Grouping Crosstab Column Data · Why You Need a Mobile Web Site · Tame Web Marketing with Social Media Management