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需要提示的地方加入οnmοusemοve="Tooltip.schedule(this,event)"
js中要设置提示的内容Tooltip.init("提示的内容");