(2002-10-04) Version 1.1 - Restructured and made code more IE garbage collector friendly. This solved the most nasty memory leaks.

Introduction

This is a fairly simple script that allows you to create help tool tips links. This is a very common way to add a small description of a keyword or feature in Windows applications as well as in Windows help files.

Demo

The Help Tool Tip was created by Erik Arvidsson for WebFX.

Usage

To use the help tip you need to include two files. One JS file and one CSS.

<script type="text/javascript" src="helptip.js"></script>
<link type="text/css" rel="StyleSheet" href="helptip.css" />

The js file defines one function called showHelpTipthat should be added to the inline HTML code. The CSS file defines the look of the helpLink as well as the look of the help-tooltip. The inline HTML code looks something like this:

<a class="helpLink" href="?" onclick="showHelpTip(event, sJsHelp); return false">JS</a>

...where sJsHelp is a variable of type String that has been defined in the head of this page. Notice that if you forget to return false in the onclick event the link will be followed and the user will navigate away from your page.

Implementation

The tool tip is created and shown when the user clicks the link. Once the link is blurred the tool tip is removed. For this to be possible we need to add an event listener to the actual anchor that was clicked. To do this we first need to find the anchor element that was clicked. The problem here is that IE does not follow the W3C DOM so we'll have to do one test to find the target node and then once we have that we walk up the tree to find the anchor element.

// find anchor element
var el = e.target ? e.target : e.srcElement;
while (el.tagName != "A")
   el = el.parentNode;

We create the tooltip element in the normal way using document.createElement. On this element we set the className and the innerHTML and insert the element last into the body element.

// create element and insert last into the body
var d = document.createElement("DIV");
d.className = "help-tooltip";
document.body.appendChild(d);
d.innerHTML = s;

Like I said before the tooltip should be hidden when the anchor is blurred and therefore we add an event listener to the blur event. When blurred the tooltip is removed from the page and the blur event listener is removed again.

// add a listener to the blur event. When blurred remove tooltip and restore anchor
el.onblur = function () {
   document.body.removeChild(d);
   el.onblur = null;
   el._helpTip = null;
};

Positioning the Tooltip

There remains one important part of the tooltip script and that is to position the tooltip. This is done by finding out where the mouse is located and then put the tooltip div at that position. This could be done in a lot easier way than we are doing but we want the positioning to be fairly smart. Therefore we take the document width and the scroll position of the browser viewport into account.

To get the document width we once again need to do some simple browser tests. Mozilla uses document.width but IE uses offsetWidth on the document canvas element. This element can be either the BODY or the HTML element depending on version and DOCTYPE settings but in IE55 and later the offsetWidth of the HTML element returns the correct value even if the BODY is treated as the canvas element for the page. For IE we also subtract a few pixels just in case the document is showing a scrollbar.

// position tooltip
var dw = document.width ? document.width : document.documentElement.offsetWidth - 25;

To get the scroll position we must once again identify the differences between Mozilla and IE. Mozilla is using window.pageXOffset and IE is using scrollLeft on the page canvas element.

// returns the scroll left and top for the browser viewport.
function getScroll() {
   if (document.body.scrollTop != undefined) {	// IE model
      var ieBox = document.compatMode != "CSS1Compat";
      var cont = ieBox ? document.body : document.documentElement;
      return {x : cont.scrollLeft, y : cont.scrollTop};
   }
   else {
      return {x : window.pageXOffset, y : window.pageYOffset};
   }
}

Now we can finally do the actual positioning. To get the mouse position we use event.clientX and event.clientY. We also offset the tooltip a little to make it appear relative to the hand cursor:

// position tooltip
var dw = document.width ? document.width : document.documentElement.offsetWidth - 25;
var scroll = getScroll();
if (e.clientX > dw - d.offsetWidth)
   d.style.left = dw - d.offsetWidth + scroll.x + "px";
else
   d.style.left = e.clientX - 2 + scroll.x + "px";
d.style.top = e.clientY + 18 + scroll.y + "px";

Minor improvements

When the user clicks on the link twice we want the original tooltip to be hidden. This is done by checking if a DIV is already assigned to the anchor and if so we hide the tooltip and remove the temporary blur listener.

When the user clicks anywhere inside the tooltip the anchor is blurred and the tooltip is hidden. This prevents anchors from working inside the tooltip and if we want to make anchors work inside the tooltip we can achieve this by listening to the mousedown event and in case it was triggered on an anchor we remove the blur event on the original anchor so that the tooltip is not hidden.

The code for this can be seen in the complete code.

Help Tool Tip
Demo
Download

Author: Erik Arvidsson