轻量级JS自定义Tooltip提示框实现

轻量级JS Tooltip提示框实现

实现鼠标悬停时出现的提示效果，相比浏览器默认的title属性，该方案视觉效果更佳且支持高度定制。

JavaScript核心代码

JavaScript代码部分如下：

 
//----------------------------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样式定义

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调用示例

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>

使用效果说明

使用效果说明：

上述代码中$("id")的作用等价于document.getElementById("id")

AttachTip:function(){}, //添加提示绑定

DetachTip:function(){}, //移除提示绑定

这两行预留方法，可通过动态绑定事件完成，因项目暂时未使用，故未实现具体逻辑