【原】轻量级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-----------------------------------

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;}

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

使用效果：

上面的$("id")作用等价于document.getElementById("id")

posted @ 2010-07-19 15:21 Jimixu 阅读(705) 评论(5) 编辑收藏举报

Jimixu

【原】轻量级JS ToolTip

公告