tooltip

代码来自js权威指南第五版。
Geometry.js

var Geometry = {};

if (window.screenLeft) 
{
  Geometry.getWindowX = function()
  {
    return window.screenLeft;
  };
  Geometry.getWindowY = function()
  {
    return window.screenTop;
  };
}
else 
  if (window.screenX) 
  {
    Geometry.getWindowX = function()
    {
      return window.screenX;
    };
    Geometry.getWindowY = function()
    {
      return window.screenY;
    };
  }

if (window.innerWidth) 
{
  Geometry.getViewportWidth = function()
  {
    return window.innerWidth;
  };
  Geometry.getviewportHeight = function()
  {
    return window.innerHeight;
  };
  Geometry.getHorizontalScroll = function()
  {
    return window.pageXOffset;
  };
  Geometry.getVerticalScroll = function()
  {
    return window.pageYOffset;
  };
}
else 
  if (document.documentElement && document.documentElement.clientWidth) 
  {
    Geometry.getViewportWidth = function()
    {
      return document.documentElement.clientWidth;
    };
    Geometry.getviewportHeight = function()
    {
      return document.documentElement.clientHeight;
    };
    Geometry.getHorizontalScroll = function()
    {
      return document.documentElement.scrollLeft;
    };
    Geometry.getVerticalScroll = function()
    {
      return document.documentElement.scrollTop;
    };
  }
  else 
    if (document.body.clientWidth) 
    {
      Geometry.getViewportWidth = function()
      {
        return document.body.clientWidth;
      };
      Geometry.getviewportHeight = function()
      {
        return document.body.clientHeight;
      };
      Geometry.getHorizontalScroll = function()
      {
        return document.body.scrollLeft;
      };
      Geometry.getVerticalScroll = function()
      {
        return document.body.scrollTop;
      };
    }

if (document.documentElement && document.documentElement.scrollWidth) 
{
  Geometry.getDocumentWidth = function()
  {
    return document.documentElement.scrollWidth;
  };
  Geometry.getDocumentHeight = function()
  {
    return document.documentElement.scrollHeight;
  };
}
else 
  if (document.body.scrollWidth) 
  {
    Geometry.getDocumentWidth = function()
    {
      return document.body.scrollWidth;
    };
    Geometry.getDocumentHeight = function()
    {
      return document.body.scrollHeight;
    };
  }

Tooltip.js

Tooltip.X_OFFSET = 25;
Tooltip.Y_OFFSET = 15;
Tooltip.DELAY = 500;
Tooltip.Text;
function Tooltip()
{
  this.tooltip = document.createElement("div");//create div for shadow
  this.tooltip.style.position = "absolute";//
  this.tooltip.style.visibility = "hidden";
  this.tooltip.className = "tooltipShadow";

  this.content = document.createElement("div");//create div for content
  this.content.style.position = "relative";
  this.content.className = "tooltipContent";

  this.tooltip.appendChild(this.content);
}

Tooltip.prototype.show = function(text, x, y)
{
  this.content.innerHTML = text;
  this.tooltip.style.left = x + "px";
  this.tooltip.style.top = y + "px";
  this.tooltip.style.visibility = "visible";

  if (this.tooltip.parentNode != document.body) 
    document.body.appendChild(this.tooltip);
};


Tooltip.prototype.hide = function()
{
  this.tooltip.style.visibility = "hidden";
};


Tooltip.prototype.schedule = function(target, e)
{

  var text = Tooltip.Text;
  if (!text) 
    return;

  var x = e.clientX + Geometry.getHorizontalScroll();
  var y = e.clientY + Geometry.getVerticalScroll();

  x += Tooltip.X_OFFSET;
  y += Tooltip.Y_OFFSET;

  var self = this;
  var timer = window.setTimeout(function()
  {
    self.show(text, x, y);
  }, Tooltip.DELAY);

  if (target.addEventListener) 
    target.addEventListener("mouseout", mouseout, false);
  else 
    if (target.attachEvent) 
      target.attachEvent("onmouseout", mouseout);
    else 
      target.onmouseout = mouseout;

  function mouseout()
  {
    self.hide();
    window.clearTimeout(timer);

    if (target.removeEventListener) 
      target.removeEventListener("mouseout", mouseout, false);
    else 
      if (target.detachEvent) 
        target.detachEvent("mouseout", mouseout);
      else 
        target.onmouseout = null;
  }
};

Tooltip.tooltip = new Tooltip();


Tooltip.schedule = function(target, e)
{
  Tooltip.tooltip.schedule(target, e);
}

Tooltip.init = function(value){Tooltip.Text = value};

tooltip.css

.tooltipShadow {
	background-color:#A9A9A9;
}
.tooltipContent {
	left:-4px;
	top:-4px;
	background-color:#F0F8FF;
	border:solid black 1px;
	padding:5px;
	font:9pt sans-serif;
	color:#0000CC;
	width:150px;
}

使用：
在jsp需要提示的地方加入onmousemove="Tooltip.schedule(this,event)"
js中要设置提示的内容Tooltip.init("提示的内容");