DHTMLLib - Tooltips


		Home \| Community \| Developer's Paradise High-Tech Jobs \| User Groups \| Site Information

DHTMLLib Demos/ Tooltips

Hover over the DHTMLLib Demo link above to see a demonstration of simple tooltips. These tooltips can be any HTML and are defined directly on the link. To add a tooltip, you add an onmouseover event handler, include DHTMLLib, and the tooltip script. First, let's show you how to define a tooltip on a link:

<A HREF="/writeOnce/writeOnce.asp" 
    ONMOUSEOVER="window.tip='All about cross-browser web-development'">
      Write Once!
</A>

The tooltip is defined by setting the tip property on the window. The contents of the tip property can be any HTML you desire. There is no need to add an onmouseout handler as that is detected automatically through event bubbling. Below is the script that displays the tooltip:

function showText() {
 if (window.tip) {
  var el = document.all.tooltip
  el.style.pixelTop = window.event.clientY + document.body.scrollTop + 15
  el.style.pixelLeft = window.event.clientX + document.body.scrollLeft + 8
  el.innerHTML = window.tip
  el.style.visibility = "visible"
 }
}

function hideText() {
 // Hide the tooltip
 document.all.tooltip.style.visibility = "hidden"
 window.tip = ""
}

function doLoad() {
 setup()
 window.document.onmouseover = showText
 window.document.onmouseout = hideText
}
window.onload = doLoad;

The last step is to include a DIV element that displays the tooltip. This DIV element is reused for all tooltips. A DIV element is used over the TABLE element because we need to modify the positioned element's contents.

<DIV 
  ID="tooltip" 
  STYLE="position: absolute; layer-background-color: yellow; background: yellow; visibility: hidden; width: 120px;">
</DIV>