Inside Technique : HTML Tooltips : Techniques II

Setting the position of an element

The browser differences for positioning elements are similar to setting visibility. As mentioned, in IE4, all style information is exposed through the style property including the element's position. This means that IE4 exposes a top and left property. However, these properties return a string representing the CSS property value (for example, "10pt"). For convenience to script authors, additional pixel* properties are exposed corresponding to the converted top and left values. Netscape exposes top and left properties directly on the object that return the pixel position.

  function setPosition(el) {
    // Set the position of an element
    src = window.event.srcElement
    if (allSupport) {
      el.style.pixelTop = getOffset(src, "Top")
      el.style.pixelLeft = getOffset(src, "Left")
    } else
    {
      el.top = src.y + 20 
      el.left = src.x 
    }
  }

In IE4, we call a helper function for determining the real location of the link. In Netscape, we use the position of the anchor with a slight offset to display the tooltip. If you were to compare both browsers side by side, you will notice a slight difference in the actual placement of the tooltip. Since precise positioning was not important in this example, we chose to use different methods to calculate a position optimal for each browser.

Updating the contents of a positioned element

HTML Tooltip uses one positioned element for all the tooltips. Prior to displaying the tooltip, the contents are updated with the related description. Updating contents and the event model are the two places Netscape and Internet Explorer diverge the most.

  function writeContents(el, tip) {
    // Replace the contents of the tooltip
    if (allSupport)
      el.innerHTML = tip
    else {
      // In NS, insert a table to work around
      // stylesheet rendering bug.
      // NS fails to apply style sheets when writing
      // contents into a positioned element.
      el.document.open()
      el.document.write("<TABLE WIDTH=200 BORDER=1 
                           BORDERCOLOR=black>
                         <TR><TD WIDTH=100% 
                           BGCOLOR=yellow>")
      el.document.write(tip)
      el.document.write("</TD></TR></TABLE>")
      el.document.close()
    }
  }

In Internet Explorer 4.0, almost every element exposes an innerHTML and innerText property. These two properties can be used to update the contents anywhere in your document at any time.

Netscape Navigator only allows the contents of positioned elements to be modified. In Netscape, all positioned elements work like documents and use the document.write() method to replace the contents.

We defined the style of the tooltip in the global stylesheet. This stylesheet applies correctly in Internet Explorer. However, in Netscape, whenever contents are written into an element, the associated style sheet information is lost. Therefore, to make sure the tooltip appears with a background and a border, we wrap the tooltip in a table element.

Next, we cover the most complex part of the code, the event handler.

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