Inside Technique : Interactive Tooltips : The Script

The following script runs only in Internet Explorer 4.0 or later. See our Cross-Browser Interactive Tooltips for a version that runs in both Netscape Navigator and Internet Explorer.

<STYLE>
<!--
  .tooltip {display: none; position: absolute;background: white}
// -->
</STYLE>
<SCRIPT>
<!--

// Copyright 1999 InsideDHTML.com, LLC. All rights reserved
// For more information see www.siteexperts.com
// This script can be reused as long as this copyright notice is maintained

var iDelay = 500
var sDisplayTimer = null, oLastItem

function getRealPos(i,which) {
  iPos = 0
  while (i!=null) {
    iPos += i["offset" + which]
    i = i.offsetParent
  }
  return iPos
}

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

function stopTimer() {
  clearTimeout(sDisplayTimer)
}

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

function hideItem() {
  if (oLastItem)
    oLastItem.style.display="none"
}
//-->
</SCRIPT>

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