Inside Technique : Interactive Tooltips : Automatically Hiding the Tooltip

We are now going to explain the code for hiding the element. The most obvious approach is to just hide the element when the mouse leaves the element. However, this approach does not work in practice, especially when applied to our interactive tooltips. With the interactive tooltip, you want to let the user move the mouse from the text to the tooltip. In addition, since there is often a small amount of space between the elements, this is not as simple as just making sure the mouse is within either element.

To solve this, we use the following hueristic: When the mouse is over either the text or the popup, the popup is displayed. When the mouse leaves either the text or the popup, the popup is displayed for an extra half-second and then hidden. If after the mouse leaves and before the element disappears the mouse reenters the popup or text, we clear the timer. If the mouse enters another element that has its own popup, the old popup is immediately hidden and the new one displayed.

While this sounds complex it is actually fairly simple and most likely what you would expect. We implement with a single timer. Whenever the user leaves the text that controls the tooltip or the tooltip itself, we start the timer for a half of a second. If the user reenters the text or the tooltip, we clear the timer. If the timer does not get cleared before it completes (the user is not over the tooltip), then the element is hidden.

We expose this functionality by tracking the onmouseover and onmouseout events on the popup element and the text itself. In the onmouseover event we call the stopTimer() to turn off any running timers. In the onmouseout event we call startTimer to start the timer if the user is leaving the element.

function stopTimer() {
	clearTimeout(sDisplayTimer)
}

function startTimer(el) {
  if (!el.contains(event.toElement)) {
    // Clear any existing timers
    stopTimer()
    sDisplayTimer = setTimeout("hideItem()",iDelay)
  }
}

In the startTimer function, we use the contains method to test whether the user has really left the element. This is necessary because of the onmouseover and onmouseout events fire and bubbles on all elements. To understand this, let's look at the following HTML fragment:

<tB ONMOUSEOVER="stopTimer()" ONMOUSEOUT="startTimer(this)">
  Bold 
  <I>Italic</I> 
  Text
</B>

Let's walk through a few user interactions. We are listing the user-interaction followed by the mouse events in the order they occur.

1. Mouse moves over the word "Bold"
B onmouseover

2. Mouse moves over the word "Italic"
B onmouseout
I onmouseover
B onmouseover

3. Mouse leaves the word "Italic" and enters the word "Text"
I onmouseout
B onmouseout
B onmouseover

4. Mouse leaves the word "Text"
B onmouseout

If you followed the above sequence closely you will see that the onmouseout event can occur on the B element before the user actually leaves it. This is because the B element is receiving a notification that the user left the I element. This bubbling of notifications is called event bubbling and often simplifies and allows you to write generic scripts. In the case of the mouse events, it adds a little complexity to determining whether the mouse has really left the element.

An easy solution to this problem is to use the contains() method that is exposed on every element. This method returns whether or not a specified element is contained within another element. We use this in the onmouseout event to test whether the user has really left the scope of the containing element:

function startTimer(el) {
  // Check if the destination is really outside the current element
  if (!el.contains(event.toElement)) {
    // Clear any existing timers
    stopTimer()
    sDisplayTimer = setTimeout("hideItem()",iDelay)
  }
}

Next we need to enhance our original showDetails function to stop any existing timers when showing a new element.

function showDetails(sDest,left) {
  if (document.all) {
    var i = event.srcElement
    stopTimer()
    dest = document.all[sDest]
    if ((oLastItem!=null) && (oLastItem!=dest))
      hideItem()
    if (dest) {
      if (left) 
        dest.style.pixelLeft = left
      else
        dest.style.pixelLeft = getRealPos(i,"Left") + i.offsetWidth + 5
      dest.style.pixelTop = getRealPos(i,"Top")
      dest.style.display = "block"
    }
    oLastItem = dest
  }
}

Finally, we bring this all together with a demonstration and explanation how to add interactive tooltips to your web page.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.