【原】轻量级JS ToolTip
JS:
代码
1 //---------------------------tooltip效果 start-----------------------------------
2 //获取某个html元素的定位
3 function GetPos(obj){
4 var pos=new Object();
5 pos.x=obj.offsetLeft;
6 pos.y=obj.offsetTop;
7 while(obj=obj.offsetParent){
8 pos.x+=obj.offsetLeft;
9 pos.y+=obj.offsetTop;
10 }
11 return pos;
12 };
13
14 //提示工具
15 var ToolTip={
16 _tipPanel:null,
17 Init:function(){
18 if(null==this._tipPanel){
19 var tempDiv=document.createElement("div");
20 document.body.insertBefore(tempDiv, document.body.childNodes[0]);
21 tempDiv.id="tipPanel";
22 tempDiv.style.display="none";
23 tempDiv.style.position="absolute";
24 tempDiv.style.zIndex="999";
25 }
26 },
27 AttachTip:function(){}, //添加提示绑定
28 DetachTip:function(){}, //移除提示绑定
29 ShowTip:function(oTarget){
30 if($("tipPanel")==null)
31 return;
32
33 /*操作流程
34 *1、构建新的html片段
35 *2、设置提示框新位置
36 *3、显示提示框
37 */
38 //1.
39 var tempStr=""; //html片段
40 if(arguments.length>1){
41 for(var i=1;i<arguments.length;i++){
42 tempStr+="<p>"+arguments[i]+"</p>";
43 }
44 }
45 $("tipPanel").innerHTML=tempStr;
46 //2.
47 var pos=GetPos(oTarget);
48 $("tipPanel").style.left=(oTarget.offsetWidth/2+pos.x)+"px";
49 $("tipPanel").style.top=(oTarget.offsetHeight+pos.y)+"px";
50 //3.
51 $("tipPanel").style.display="";
52 },
53 HideTip:function(){
54 if($("tipPanel")==null)
55 return;
56 $("tipPanel").style.display="none";
57 }
58 };
59
60 //---------------------------tooltip效果 end-----------------------------------
2 //获取某个html元素的定位
3 function GetPos(obj){
4 var pos=new Object();
5 pos.x=obj.offsetLeft;
6 pos.y=obj.offsetTop;
7 while(obj=obj.offsetParent){
8 pos.x+=obj.offsetLeft;
9 pos.y+=obj.offsetTop;
10 }
11 return pos;
12 };
13
14 //提示工具
15 var ToolTip={
16 _tipPanel:null,
17 Init:function(){
18 if(null==this._tipPanel){
19 var tempDiv=document.createElement("div");
20 document.body.insertBefore(tempDiv, document.body.childNodes[0]);
21 tempDiv.id="tipPanel";
22 tempDiv.style.display="none";
23 tempDiv.style.position="absolute";
24 tempDiv.style.zIndex="999";
25 }
26 },
27 AttachTip:function(){}, //添加提示绑定
28 DetachTip:function(){}, //移除提示绑定
29 ShowTip:function(oTarget){
30 if($("tipPanel")==null)
31 return;
32
33 /*操作流程
34 *1、构建新的html片段
35 *2、设置提示框新位置
36 *3、显示提示框
37 */
38 //1.
39 var tempStr=""; //html片段
40 if(arguments.length>1){
41 for(var i=1;i<arguments.length;i++){
42 tempStr+="<p>"+arguments[i]+"</p>";
43 }
44 }
45 $("tipPanel").innerHTML=tempStr;
46 //2.
47 var pos=GetPos(oTarget);
48 $("tipPanel").style.left=(oTarget.offsetWidth/2+pos.x)+"px";
49 $("tipPanel").style.top=(oTarget.offsetHeight+pos.y)+"px";
50 //3.
51 $("tipPanel").style.display="";
52 },
53 HideTip:function(){
54 if($("tipPanel")==null)
55 return;
56 $("tipPanel").style.display="none";
57 }
58 };
59
60 //---------------------------tooltip效果 end-----------------------------------
CSS:
1 #tipPanel{ background:white; padding:6px 8px; width:300px; border:solid 4px #09c; font-size:14px; color:#555;}
2 #tipPanel p{ margin:0px;}
3 #tipPanel b{ color:red; font-size:14px;}
2 #tipPanel p{ margin:0px;}
3 #tipPanel b{ color:red; font-size:14px;}
HTML调用:
代码
1 <body>
2 <input type="button" value="hover me" onmouseover='ToolTip.ShowTip(this,"<b>日期:</b>2010-7-19");' onmouseout='ToolTip.HideTip();' style="margin:200px 100px;" />
3 </body>
4 <script type="text/javascript">
5 //initialize tooltip control
6 ToolTip.Init();
7 </script>
8
2 <input type="button" value="hover me" onmouseover='ToolTip.ShowTip(this,"<b>日期:</b>2010-7-19");' onmouseout='ToolTip.HideTip();' style="margin:200px 100px;" />
3 </body>
4 <script type="text/javascript">
5 //initialize tooltip control
6 ToolTip.Init();
7 </script>
8
使用效果:
上面的$("id")作用等价于document.getElementById("id")