function documentElementAccordingMsie() {
  return (!window.opera && document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body
}

function showHint(browserEvent, pageElement) {
  // Mouse coordinates
  var coordX = 0;
  var coordY = 0;
  // Check the browser - based on MSIE or other
  // The only MSIE is different
  msieElement = documentElementAccordingMsie();
  if(navigator.appName.indexOf("Microsoft Internet Explorer") >= 0) {
    coordX = msieElement.scrollLeft + event.clientX;
    coordY = msieElement.scrollTop  + event.clientY
  } else {
    coordX = browserEvent.pageX;
    coordY = browserEvent.pageY;
  }
  // Show hint
  document.getElementById(pageElement).style.display = "inline";
  document.getElementById(pageElement).style.top  = eval(coordY + 15) + "px";
  document.getElementById(pageElement).style.left = eval(coordX + 15) + "px";
}

function hideHint(pageElement) {
  document.getElementById(pageElement).style.display = "none";
}

function createHint(elementId, hintText) {
  var hintId = elementId + "_hint";
  // Add simple DIV element with defined ID and HINT
  var hint = document.createElement("div");
  hint.id = hintId;
  hint.className = "hint";
  hint.innerHTML = hintText;
  document.body.appendChild(hint);
  // Modify element for showing hint
  var element = document.getElementById(elementId);
  if(element){
    element.style.cursor = 'default';
    // Check the browser - based on MSIE or other
    // The only MSIE is different
    if(navigator.appName.indexOf("Microsoft Internet Explorer") >= 0) {
      element.onmousemove = function() {showHint(event, hintId);};
      element.onmouseout  = function() {hideHint(hintId);};
    } else {
      element.setAttribute("onmousemove", "showHint(event, '" + hintId + "');");
      element.setAttribute("onmouseout", "hideHint('" + hintId + "');");
    }
    element.className = "hint";
  }
}