<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style>
.tooltip {
width:300px;
height:300px;
background:#f00;
}
</style>
<script>
var TooltipManager = (
function(){
var storedInstance =
null;
var Tooltip =
function(){
this.delayTimeout =
null;
this.delay = 1500
;
this.element = document.createElement('div'
);
this.element.style.display = 'none'
;
this.element.style.position = 'absolute'
;
this.element.className = 'tooltip'
;
document.getElementsByTagName('body')[0].appendChild(
this.element);
};
Tooltip.prototype =
{
startDelay : function(e,text){
if(
this.delayTimeout ==
null){
var that =
this;
var x =
e.clientX;
var y =
e.clientY;
this.delayTimeout = setTimeout(
function(){
that.show(x,y,text);
},this.delay)
}
},
show : function(x,y,text){
clearTimeout(this.delayTimeout);
this.delayTimeout =
null;
this.element.innerHTML =
text;
this.element.style.left = x + 'px'
;
this.element.style.top = (y+20) + 'px'
;
this.element.style.display = 'block'
;
},
hide : function(){
clearTimeout(this.delayTimeout);
this.delayTimeout =
null;
this.elements.style.display = 'none'
;
}
};
return {
addTooltip : function(targetElement,text){
var tt =
this.getTooltip();
addEvent(targetElement,'mouseover',
function(e){ tt.startDelay(e,text)});
addEvent(targetElement,'mouseout',
function(e){ tt.hide()})
},
getTooltip : function(){
if(storedInstance ==
null){
storedInstance =
new Tooltip();
};
return storedInstance;
}
}
}())
</script>
</body>
</html>
直接上代码了
转载于:https://www.cnblogs.com/diligenceday/p/3428020.html
相关资源：JAVA上百实例源码以及开源项目
