Inside Technique : HTML Tooltips : Techniques III

Setting up the event handler

We designed HTML Tooltips to run without requiring custom code on each anchor. To achieve this, we took advantage of event bubbling in IE4 and simulated simple bubbling in Netscape. Whenever the mouse moves over an element, we check if the element (or any of its containing elements) have a _tip property. If so, we display the tooltip. If not, we do nothing.

To accomplish this, we took advantage of a feature called event bubbling. In IE4, every element support events. When an event occurs, it will bubble through the container hierarchy. If you have the following HTML, <A>DHTML is <B>cool!</B></A>, and you moved the mouse over cool, you would get events on the B element followed by events on the A element, continuing to all the elements the A element is contained withing.

In Netscape, events are only supported on a very few elements and their is no concept of bubbling. However, Netscape does have a way of capturing events before the element receives them on the document. So in Netscape, when the mouse goes over the anchor, the document, followed by the anchor itself receive the event. Since in Netscape the B element (and most non-behavior markup, eg., P, H1, EM, etc), do not support events, the event model is very limited.

To make this work in both browsers, we wrote code for Netscape that captures all the mouseover and mouseout events on the document, and then route the event to the anchor. By routing the event, we ensure the _tip attribute can be set (remember <A HREF="..." ONMOUSEOVER="this._tip='..the tip...'">) before we process the event. In Internet Explorer, everything happens automatically without any special code.

The code for setting up the event handlers are shown below:

  function setupEventObject(e) {
    // Map NS event object to IEs
    if (e==null) return // IE returns
    window.event = e
    window.event.fromElement = e.target
    window.event.toElement = e.target
    window.event.srcElement = e.target
    window.event.x = e.x
    window.event.y = e.y
    // Route the event to the original element
    // Necessary to make sure _tip is set.
    window.event.srcElement.handleEvent(e);
  }

  function doLoad() {
    // Do Loading
    if ((window.document.captureEvents==null) && (!allSupport))
      return // Not IE4 or NS4
    if (window.document.captureEvents!=null)  // NS - capture events
      window.document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT)
    window.document.onmouseover = doMouseOver;
    window.document.onmouseout = doMouseOut;
  }

One area Netscape and Microsoft almost matcc is in the definition of the event object. This object contains information related to the event such as the mouse position, on what element the event occured, the state of the keyboard, and so on. In Netscape, the event object is passed to the event handler as an argument. In Explorer, the event object is always available as a property on the window object. For HTML Tooltips the only information required is the element the mouse is entering or is leaving and the position of the mouse. To simplify the differences, every time an event occurs in Netscape, we add the relevant properties of the event object to an event object on the window. This allows us to run the same code in both browsers.

The mouse handlers

The last code is the mouse handlers. The mouse handlers take advantage of all the discussed functions. The mouseover handler works by checking if the element the mouse is over has a _tip property. If so, it calls a function to position, update, and display the tooltip window.

When the mouse leaves the element, first we check if a tooltip window is displayed, then we just hide it until it is needed again.

  function doMouseOver(e) {
    // Mouse moves over an element
    setupEventObject(e)
    var el, tip
    if ((el = checkName(window.event.srcElement))!=null)
      if  (!el._display) {
        displayContents(el._tip)
        el._display = true
      }
  }

  function doMouseOut(e) {
    // Mouse leaves an element
    setupEventObject(e)
    el = checkName(window.event.srcElement)
    var el, tip
    if ((el = checkName(window.event.srcElement))!=null)
      if (el._display)
        if ((el.contains==null) || (!el.contains(window.event.toElement))) {
          setVisibility(getElement("tipBox"), false)
          el._display = false
        }
  }

By now you have seen how to combine quite a few cross-browser techniques. On the last page, we provide the complete code listing for HTML Tooltips.

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