tooltip

gzwfdy

代码来自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("提示的内容");