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 shadowthis.tooltip.style.position = "absolute";//this.tooltip.style.visibility = "hidden";this.tooltip.className = "tooltipShadow"; this.content = document.createElement("div");//create div for contentthis.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("提示的内容");
页:
[1]