Tooltip浮动提示框效果（掌握里面的小知识）
使用原生JavaScript设计和实现Tooltip浮动提示框特效，了解代码简化、事件绑定、事件冒泡等技巧和知识。
特效四个关键点：
显示：鼠标移到ToolTip超链接上时，ToolTip提示框可以显示出来
隐藏：鼠标移开时，ToolTip提示框自动隐藏
定位：ToolTip提示框的位置需要根据ToolTip超链接的位置来设置
可配置：ToolTip提示框可以根据参数不同，改变尺寸和显示内容
注意点：1）border-radius和 box-shadow兼容写法
2）不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave
3）W3C规定不允许内联元素嵌套块级元素 ，其中的a链接嵌套了div，可能不符合W3C标准( tip：他是移入a链接的时候在a链接中创建的div )
简单的函数封装写法（便于引用，缩短代码量）：
1)通过元素的id获得元素的DOM引用
1 var $ = function(id){ 2 return document.getElementById(id); 3 }
2)绑定事件的函数
1 function addEvent(obj,event,fn){ //要绑定的元素对象，要绑定的事件，触发的回调函数 2 if(obj.addEventListener){ //非IE，支持冒泡和捕获 3 obj.addEventListenner(event,fn,false); 4 }else if(obj.attachEvent){ //IE，只支持冒泡 5 obj.attachEvent('on'+event,fn); 6 } 7 }
效果如图：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <style type="text/css"> 8 body{ 9 font-size: 14px; 10 line-height: 1.8; 11 background: url("img/bg.jpg") no-repeat center top; 12 font-family: "微软雅黑"; 13 } 14 #demo{ 15 width: 500px; 16 margin: 30px auto; 17 padding: 20px 30px; 18 position: relative; 19 background-color: #fff; 20 border-radius: 10px; 21 -moz-border-radius: 10px;/*这个属性 主要是专门支持Mozilla Firefox 火狐浏览器的CSS属性*/ 22 -webkit-border-radius: 10px;/*苹果；谷歌，等一些浏览器认，因为他们都用的是webkit内核*/ 23 box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2); 24 -moz-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2); 25 -webkit-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2); 26 } 27 #demo h2{ 28 color: #03f; 29 } 30 #demo .tooltip{ 31 color: #03f; 32 cursor: help; 33 } 34 .tooltip-box{ 35 display: block; 36 background: #fff; 37 line-height: 1.6; 38 border: 1px solid #66CCFF; 39 color: #333; 40 padding: 20px; 41 font-size: 12px; 42 border-radius: 5px; 43 -moz-border-radius: 5px; 44 -webkit-border-radius: 5px; 45 overflow: auto; 46 } 47 #mycard img{ 48 float: left; 49 width: 100px; 50 height: 100px; 51 padding: 10px; 52 } 53 #mycard p{ 54 float: left; 55 width: 150px; 56 padding: 0 10px; 57 } 58 </style> 59 <script type="text/javascript"> 60 window.onload=function(){ 61 //绑定事件的函数 62 function addEvent(obj,event,fn){ //要绑定的元素对象，要绑定的事件，触发的回调函数 63 if(obj.addEventListener){ //非IE，支持冒泡和捕获 64 obj.addEventListener(event,fn,false); 65 }else if(obj.attachEvent){ //IE，只支持冒泡 66 obj.attachEvent('on'+event,fn); 67 } 68 } 69 //通过用户代理的方式判断是否是IE的方法，不能判断出IE11 70 var isIE = navigator.userAgent.indexOf("MSIE") > -1; 71 72 var $ = function(id){ 73 return document.getElementById(id); 74 } 75 var demo = $("demo"); 76 //obj - ToolTip超链接元素 77 //id - ToolTip提示框id 78 //html - ToolTip提示框HTML内容 79 //width - ToolTip提示框宽度（可选） 80 //height - ToolTip提示框高度（可选） 81 function showTooltip(obj,id,html,width,height){ 82 if($(id)==null){ 83 //创建 <div class="tooltip-box" id="xx">xxxxxxxx</div> 84 var toolTipBox; 85 toolTipBox = document.createElement('div'); 86 toolTipBox.className = "tooltip-box"; 87 toolTipBox.id = id; 88 toolTipBox.innerHTML = html; 89 obj.appendChild(toolTipBox); 90 toolTipBox.style.width = width ? width + 'px':"auto"; 91 toolTipBox.style.height = height ? height + 'px':"auto"; 92 if(!width && isIE){ 93 toolTipBox.style.width = toolTipBox.offsetWidth;//因为IE不支持auto属性 94 } 95 toolTipBox.style.position = 'absolute'; 96 toolTipBox.style.display = 'block'; 97 var left = obj.offsetLeft; 98 var top = obj.offsetTop + 20; 99 //当浏览器窗口缩小时不让提示框超出浏览器 100 if(left + toolTipBox.offsetWidth > document.body.clientWidth){ 101 var demoLeft = demo.offsetLeft; 102 left = document.body.clientWidth - toolTipBox.offsetWidth - demoLeft; 103 if(left < 0) 104 left = 0; 105 } 106 toolTipBox.style.left = left + 'px'; 107 toolTipBox.style.top = top + 'px'; 108 addEvent(obj,"mouseleave" ,function(){ 109 setTimeout(function(){ 110 $(id).style.display = 'none'; 111 },300); 112 }); 113 } 114 else{ 115 //显示 116 $(id).style.display = 'block'; 117 } 118 } 119 //事件冒泡 120 addEvent(demo,'mouseover',function(e){ 121 var event = e || window.event; 122 var target = event.target || event.srcElement;//IE下,event对象有srcElement属性,但是没有target属性; 123 //Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的 124 //event.srcElement：表示的当前的这个事件源。 125 if(target.className == "tooltip"){ 126 var _html; 127 var _id; 128 var _width = 200; 129 switch (target.id){ 130 case "tooltip1": 131 _id = "t1"; 132 _html = "中华人民共和国"; 133 break; 134 case "tooltip2": 135 _id = "t2"; 136 _html = "美国篮球职业联赛"; 137 break; 138 case "tooltip3": 139 _id = "t3"; 140 _html = "<h2>春晓</h2><p>春眠不觉晓，</p><p>处处闻啼鸟。</p><p>夜来风雨声，</p><p>花落知多少。</p>"; 141 _width = 100; 142 break; 143 case "tooltip4": 144 _id = "t4"; 145 _html = "<img src='img/1.jpg' width='500' /> "; 146 _width = 520; 147 break; 148 case "tooltip5": 149 _id = "t5"; 150 _html = "<div id='mycard'><img src='img/2.jpg' alt=''/><p><strong>昵称一定要长</strong></p><p>我的简介我的简介</p></div>"; 151 _width = 300; 152 break; 153 case "tooltip6": 154 _id = "t6"; 155 _html = "<iframe src='http://www.imooc.com/' width='480' height='300'></iframe>"; 156 _width = 500; 157 break; 158 } 159 showTooltip(target,_id,_html,_width); 160 } 161 }); 162 /* var t1 = $("tooltip1"); 163 var t2 = $("tooltip2"); 164 var t3 = $("tooltip3"); 165 var t4 = $("tooltip4"); 166 var t5 = $("tooltip5"); 167 var t6 = $("tooltip6"); 168 t1.onmouseenter = function () { 169 showTooltip(this, "t1", '中华人民共和国', 200); 170 }; 171 t2.onmouseenter = function () { 172 showTooltip(this, "t2", '美国篮球职业联赛', 200); 173 }; 174 t3.onmouseenter = function () { 175 showTooltip(this, "t3", '<h2>春晓</h2><p>春眠不觉晓，</p><p>处处闻啼鸟。</p><p>夜来风雨声，</p><p>花落知多少。</p>', 100); 176 }; 177 t4.onmouseenter = function () { 178 showTooltip(this, "t4", '<img src="img/1.jpg" width="500" /> ', 520); 179 }; 180 t5.onmouseenter = function () { 181 var _html = '<div id="mycard"><img src="img/2.jpg" alt=""/><p><strong>昵称一定要长</strong></p><p>我的简介我的简介</p></div>'; 182 showTooltip(this, "t5", _html, 300); 183 }; 184 t6.onmouseenter = function () { 185 var _html = '<iframe src="http://www.imooc.com/" width="480" height="300"></iframe>' 186 showTooltip(this, "t6", _html, 500); 187 };*/ 188 } 189 </script> 190 <body> 191 <div id="demo"> 192 <h2>原生JavaScript实现ToolTip效果</h2> 193 <p>ToolTip效果是非常常见的网页特效，它可以在用户将指针放置在控件上时为用户显示提示信息。 194 比如简称文字显示一行文字全称，例：<a class="tooltip" id="tooltip1">中国</a>， <a class="tooltip" id="tooltip2">NBA</a>。 195 又比如显示一段文字，例：唐诗三百首中的<a class="tooltip" id="tooltip3">春晓</a>你会么？如果不看tooltip提示你背不出来的话，那么你 196 可要加油了。 197 </p> 198 <p> 199 ToolTip效果还可以用来显示图片，例：<a class="tooltip" id="tooltip4">西湖美景</a>。当然显示一块儿带格式的内容也不在话下，例： 200 <a class="tooltip" id="tooltip5">我的资料</a>。 201 </p> 202 <p> 203 甚至你可以显示一整个网站：例：<a class="tooltip" id="tooltip6">慕课网</a>。 204 </p> 205 <p> 206 注意好的ToolTip需要考虑样式、效果、页面的边界等信息，希望你可以做出更漂亮的ToolTip效果。 207 </p> 208 </div> 209 </body> 210 </html>
