轻量级 JS ToolTip提示效果

160 阅读 0 评论 106 点赞

我是靠谱客的博主活力魔镜，最近开发中收集的这篇文章主要介绍轻量级 JS ToolTip提示效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

鼠标经过出现的提示效果，比title更漂亮，可订制。
JS：

复制代码代码如下:

 
//---------------------------tooltip效果 start----------------------------------- 
//获取某个html元素的定位 
function GetPos(obj){ 
var pos=new Object(); 
pos.x=obj.offsetLeft; 
pos.y=obj.offsetTop; 
while(obj=obj.offsetParent){ 
pos.x+=obj.offsetLeft; 
pos.y+=obj.offsetTop; 
} 
return pos; 
}; 

//提示工具 
var ToolTip={ 
_tipPanel:null, 
Init:function(){ 
if(null==this._tipPanel){ 
var tempDiv=document.createElement("div"); 
document.body.insertBefore(tempDiv, document.body.childNodes[0]); 
tempDiv.id="tipPanel"; 
tempDiv.style.display="none"; 
tempDiv.style.position="absolute"; 
tempDiv.style.zIndex="999"; 
} 
}, 
AttachTip:function(){}, //添加提示绑定 
DetachTip:function(){}, //移除提示绑定 
ShowTip:function(oTarget){ 
if($("tipPanel")==null) 
return; 

/*操作流程 
*1、构建新的html片段 
*2、设置提示框新位置 
*3、显示提示框 
*/ 
//1. 
var tempStr=""; //html片段 
if(arguments.length>1){ 
for(var i=1;i<arguments.length;i++){ 
tempStr+="<p>"+arguments[i]+"</p>"; 
} 
} 
$("tipPanel").innerHTML=tempStr; 
//2. 
var pos=GetPos(oTarget); 
$("tipPanel").style.left=(oTarget.offsetWidth/2+pos.x)+"px"; 
$("tipPanel").style.top=(oTarget.offsetHeight+pos.y)+"px"; 
//3. 
$("tipPanel").style.display=""; 
}, 
HideTip:function(){ 
if($("tipPanel")==null) 
return; 
$("tipPanel").style.display="none"; 
} 
}; 

//---------------------------tooltip效果 end----------------------------------- 

CSS：

复制代码代码如下:

 
#tipPanel{ background:white; padding:6px 8px; width:300px; border:solid 4px #09c; font-size:14px; color:#555;} 
#tipPanel p{ margin:0px;} 
#tipPanel b{ color:red; font-size:14px;} 

HTML调用：

复制代码代码如下:

 
<body> 
<input type="button" value="hover me" onmouseover='ToolTip.ShowTip(this,"<b>日期：</b>2010-7-19");' onmouseout='ToolTip.HideTip();' style="margin:200px 100px;" /> 
</body> 
<script type="text/javascript"> 
//initialize tooltip control 
ToolTip.Init(); 
</script> 

使用效果：