javascript 【Tooltip提示框】

===========================提示框=================================

===========================================================================================================================

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5     <title>ToolTip效果</title>
 6     <style>
 7         body {
 8             font-size: 18px;
 9             line-height: 1.8;
10             font-family: "Microsoft YaHei", "微软雅黑";
11             position: relative;
12         }
13 
14         #demo {
15             width: 500px;
16             margin: 30px auto;
17             padding: 20px 30px;
18             position: relative;
19             background-color: #fff;
20         }
21 
22         #demo h2 {
23             color: #03F;
24         }
25 
26         #demo .tooltip {
27             color: #03F;
28             cursor: help;
29         }
30        .tooltip-box{
31            display: block;
32            background: #fff;
33            line-height: 1.6;
34            color: #333;
35            padding: 20px;
36            font-size:12px;
37            border:1px solid blue;
38            border-radius: 5px;
39            -wekit-border-radius:5px;
40            -moz-border-radius:5px;
41            overflow: auto;
42        }
43       
44     </style>
45 </head>
46 
47 <body>
48 <div id="demo">
49     <p><a class="tooltip" id="tooltip1">慕课网</a>的使命是传播互联网最前沿技术，帮助更多的人实现梦想！在慕课网前端开发、
50         <a class="tooltip" id="tooltip2">Android</a>开发、<a class="tooltip" id="tooltip3">iOS</a>开发等课程统统有，你还在等什么，赶紧来学习吧。
51     </p>
52 </div>
53 <script type="text/javascript">
54 var isIE=navigator.userAgent.indexOf("MSIE")>-1;
55 
56   function showToolTip(obj,id,html,width,height){
57       if((document.getElementById(id))==null){
58           var left=obj.offsetLeft;
59         var top= obj.offsetTop+20;
60         var toolTipBox;
61         toolTipBox = document.createElement("div");//<div class="tooltip-box" id="id">html</div>
62         toolTipBox.className="tooltip-box";
63         toolTipBox.id = id;
64         toolTipBox.innerHTML = html;
65         obj.appendChild(toolTipBox);
66         toolTipBox.style.width=width?width+"px":"auto";
67         toolTipBox.style.height=height?height+"px":"auto";
68         if(!width && isIE){
69           toolTipBox.style.width = toolTipBox.offsetWidth+"px";
70         }
71         toolTipBox.style.position="absolute";
72         toolTipBox.style.display="block";
73        
74 
75         
76         toolTipBox.style.left=left+"px";
77         toolTipBox.style.top=top+"px";
78 
79         obj.onmouseleave =function(){
80               setTimeout(function(){
81               document.getElementById(id).style.display="none";
82             },300);
83         }
84       }
85       else
86       {
87       document.getElementById(id).style.display="block";
88       }
89   }
90  var t1=document.getElementById("tooltip1");
91  t1.onmouseenter = function(){
92     showToolTip(this,"t","中华人民共和国",200);
93  }
94 </script>
95 </body>
96 </html>

===========================================防止超出浏览器的代码==================

  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5     <title>ToolTip效果</title>
  6     <style>
  7         body {
  8             font-size: 18px;
  9             line-height: 1.8;
 10             font-family: "Microsoft YaHei", "微软雅黑";
 11             position: relative;
 12         }
 13 
 14         #demo {
 15             width: 500px;
 16             margin: 30px auto;
 17             padding: 20px 30px;
 18             position: relative;
 19             background-color: #fff;
 20         }
 21 
 22         #demo h2 {
 23             color: #03F;
 24         }
 25 
 26         #demo .tooltip {
 27             color: #03F;
 28             cursor: help;
 29         }
 30        .tooltip-box{
 31            display: block;
 32            background: #fff;
 33            line-height: 1.6;
 34            color: #333;
 35            padding: 20px;
 36            font-size:12px;
 37            border:1px solid blue;
 38            border-radius: 5px;
 39            -wekit-border-radius:5px;
 40            -moz-border-radius:5px;
 41            overflow: auto;
 42        }
 43       
 44     </style>
 45 </head>
 46 
 47 <body>
 48 <div id="demo">
 49     <p><a class="tooltip" id="tooltip1">慕课网</a>的使命是传播互联网最前沿技术，帮助更多的人实现梦想！在慕课网前端开发、
 50         <a class="tooltip" id="tooltip2">Android</a>开发、<a class="tooltip" id="tooltip3">iOS</a>开发等课程统统有，你还在等什么，赶紧来学习吧。
 51     </p>
 52 </div>
 53 <script type="text/javascript">
 54 var isIE=navigator.userAgent.indexOf("MSIE")>-1;
 55 
 56   function showToolTip(obj,id,html,width,height){
 57       if((document.getElementById(id))==null){
 58           var left=obj.offsetLeft;
 59         var top= obj.offsetTop+20;
 60         var toolTipBox;
 61         toolTipBox = document.createElement("div");//<div class="tooltip-box" id="id">html</div>
 62         toolTipBox.className="tooltip-box";
 63         toolTipBox.id = id;
 64         toolTipBox.innerHTML = html;
 65         obj.appendChild(toolTipBox);
 66         toolTipBox.style.width=width?width+"px":"auto";
 67         toolTipBox.style.height=height?height+"px":"auto";
 68         if(!width && isIE){
 69           toolTipBox.style.width = toolTipBox.offsetWidth+"px";
 70         }
 71         toolTipBox.style.position="absolute";
 72         toolTipBox.style.display="block";
 73        //不让toolTIP提示框超出浏览器
 74        if(left+toolTipBox.offsetWidth>document.body.clientWidth){
 75               var demoleft=document.getElementById("demo").offsetLeft;
 76               left=document.body.clientWidth-demoleft-toolTipBox.offsetWidth;
 77               if(left<0) left=0;
 78        }
 79         
 80         toolTipBox.style.left=left+"px";
 81         toolTipBox.style.top=top+"px";
 82 
 83         obj.onmouseleave =function(){
 84               setTimeout(function(){
 85               document.getElementById(id).style.display="none";
 86             },300);
 87         }
 88       }
 89       else
 90       {
 91       document.getElementById(id).style.display="block";
 92       }
 93   }
 94  var t1=document.getElementById("tooltip1");
 95  t1.onmouseenter = function(){
 96     showToolTip(this,"t","中华人民共和国",200);
 97  }
 98 </script>
 99 </body>
100 </html>
View Code

 

posted @ 2018-03-01 16:32  Justice-V  阅读(111)  评论(0)    收藏  举报