欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

tooltip

程序员文章站 2024-03-24 12:28:52
...
代码来自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("提示的内容");
相关标签: prototype CSS JSP