Xoffset = 10;    // modify these values to ...
Yoffset = 20;    // change the popup position.
tooltip_orientation = 'belowleft';
tooltip_timer = null;
tooltip_displayed = false;
tooltip_adjusted = false;
tooltip_mouseover = false;

function popup(msg, front_color, back_color, border_color, width, hide_selects, orientation) {
  document.getElementById("tooltip").innerHTML = '<table cellpadding="0" cellspacing="0" border="0" bgcolor="' + border_color + '"><tr><td><table width="' + width + '" border="0" cellpadding="2" cellspacing="1"><tr><td bgcolor="' + back_color + '"><div style="margin-left: 5px; color:' + front_color + '; font-size: 11px; font-family: tahoma, verdana, sans-serif;">' + msg + '</div></td></tr></table></td></tr></table>';
  if (!tooltip_adjusted) {
    switch (tooltip_orientation) {
      case 'belowright':
        adjustX = 0;
        break;
      case 'aboveleft':
      case 'belowleft':
      default:
        adjustX = -250;
        break;
    }
    with (document.getElementById("tooltip")) {
      old_left = style.left;
      style.left = parseInt(style.left) + adjustX;
    }
  }
  if (ie5 && hide_selects != '') {
    var selects = document.getElementsByTagName('select');
    for (i = 0; i < selects.length; ++i) {
      selects[i].style.display = 'none';
    }
  }
  document.getElementById("tooltip").style.display = 'block';
  tooltip_orientation = orientation;
  tooltip_displayed = true;
  if (!tooltip_adjusted) {
    switch (tooltip_orientation) {
      case 'aboveleft':
        adjustX = -(document.getElementById("tooltip").scrollWidth) + 250;
        adjustY = -(document.getElementById("tooltip").scrollHeight);
        break;
      case 'belowright':
        adjustX = 0;
        adjustY = 0;
        break;
      case 'belowleft':
      default:
        adjustX = -(document.getElementById("tooltip").scrollWidth) + 250;
        adjustY = 0;
        break;
    }
    with (document.getElementById("tooltip")) {
      old_left = style.left;
      old_top = style.top;
      style.left = parseInt(style.left) + adjustX;
      style.top = parseInt(style.top) + adjustY;
    }
    tooltip_adjusted = true;
  }
}

function get_mouse(e) {
  try { if (e) event = e; } catch (e2) {}
  switch (tooltip_orientation) {
    case 'aboveleft':
      adjustX = -(Xoffset + document.getElementById("tooltip").scrollWidth);
      adjustY = -(Yoffset + document.getElementById("tooltip").scrollHeight);
      break;
    case 'belowright':
      adjustX = Xoffset;
      adjustY = Yoffset;
      break;
    case 'belowleft':
    default:
      adjustX = -(Xoffset + document.getElementById("tooltip").scrollWidth);
      adjustY = Yoffset;
      break;
  }
  if (document.getElementById("tooltip").scrollWidth == 0) {
    tooltip_adjusted = false;
  } else {
    tooltip_adjusted = true;
  }
  if (event.pageY) {
    document.getElementById("tooltip").style.left = event.pageX + adjustX;
    document.getElementById("tooltip").style.top = event.pageY + adjustY;
  } else {
    document.getElementById("tooltip").style.left = event.clientX + document.body.scrollLeft + adjustX;
    document.getElementById("tooltip").style.top = event.clientY + document.body.scrollTop + adjustY;
  }
}

function killTooltip(hide_selects) {
  if (ie5 && hide_selects != '') {
    var selects = document.getElementsByTagName('select');
    for (i = 0; i < selects.length; ++i) {
      selects[i].style.display = 'inline';
    }
  }
  document.getElementById("tooltip").style.display = 'none';
  tooltip_displayed = false;
}

function attachTooltip(id, tip, front_color, back_color, border_color, width, hide_selects, orientation, delay) {
  if (!front_color) front_color = '#000000';
  if (!back_color) back_color = '#dddddd';
  if (!border_color) border_color = '#000000';
  if (!width) width = 250;
  if (!hide_selects) hide_selects = '';

  if (delay > 0) {
    document.getElementById(id).onmousemove = function(e) { get_mouse(e); if (!tooltip_displayed && tooltip_mouseover) { clearTimeout(tooltip_timer); tooltip_timer = setTimeout('popup("' + tip + '", "' + front_color + '", "' + back_color + '", "' + border_color + '", "' + width + '", "' + hide_selects + '", "' + orientation + '")', delay); } };
    document.getElementById(id).onmouseover = function(e) { get_mouse(e); tooltip_timer = setTimeout('popup()', delay, tip, front_color, back_color, border_color, width, hide_selects, orientation); tooltip_mouseover = true; };
    document.getElementById(id).onmouseout = function() { killTooltip(hide_selects); clearTimeout(tooltip_timer); tooltip_mouseover = false; };
  } else {
    document.getElementById(id).onmousemove = get_mouse;
    document.getElementById(id).onmouseover = function() { popup(tip, front_color, back_color, border_color, width, hide_selects, orientation); };
    document.getElementById(id).onmouseout = function() { killTooltip(hide_selects); };
  }
}