js实现tooltip动态提示效果（文字版）
页面中经常用到鼠标移动到一个元素上面显示提示的功能，最开始的做法是在下面创建一个div然后动态显示这个div,但是这样需要加很多div，比较麻烦。
针对上面个的需求，这边写了一个tooltip动态提示的效果，鼠标移动到元素上面动态展示，移除的时候直接删除，这样每次只生成一个div。代码可以传一个参数（dom元素），如果这个参数存在就相对于这个dom进行定位（这个元素必须为相对或者绝对 或者fixed（固定）定位）;
具体代码如下
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>tooltip</title> <style type="text/css"> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { margin:0; padding:0; } body,button,input,select,textarea { font-family:'Microsoft YaHei',arial,SimSun,sans-serif,tahoma; } body{ -webkit-text-size-adjust:none; } input,select,textarea { font-size:100%; } article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0 none; } iframe { display:block; } abbr,acronym { border:none; font-variant:normal; } del { text-decoration:line-through; } address,caption,cite,code,dfn,em,th,var { font-style:normal; font-weight:500; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:500; } q:before,q:after { content:''; } sub, sup { font-size:75%; line-height:0; position:relative; vertical-align:baseline; } sup { top:-0.5em; } sub { bottom:-0.25em; } ins,a { text-decoration:none; } .clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; overflow:hidden; } .clearfix{ *zoom:1; } .fl { float:left; } .fr { float:right; } .hidenone{ display:none; visibility:hidden; } .hide{ visibility:hidden; } .mt10{ margin-top:10px; } .mt20{ margin-top:20px; } .ml10{ margin-left:10px; } .mr10{ margin-right:10px; } .pt10{ padding-top:10px; } .pl10{ padding-left:10px; } .pr10{ padding-right:10px; } .tc{ text-align:center; } /*表格样式开始*/ .common-table { margin: 0px auto 10px; width: 960px; background: #fff; text-align: center; table-layout: fixed; } .common-table-th { height: 44px; background: #F6F6F5; border: 1px solid #E8E7E4; font-size: 16px; color: #333; text-align: center; vertical-align: middle; text-overflow: ellipsis; } .common-table-td { border: 1px solid #dcdcdc; color: #666; font-size: 14px; line-height: 50px; } .common-table-tbody { margin: 5px auto 10px; width: 1170px; background: #fff; text-align: center; table-layout: fixed; } .th-work-name{ width: 27.6%; } .first-score, .last-score, .highest-score{ display: inline-block; width: 100%; height: 100%; cursor: pointer; color: #00F; text-align: center; } .common-table-td a:link, .common-table-td a:visited { color: #00F; text-decoration: none; } /*表格样式结束*/ #pos_h_cread{ position: absolute; z-index: 9999999; border-radius: 5px; width: 500px; padding:10px; background:rgba(0, 0, 0, 0.7); background:#000\9; filter:alpha(opacity=70); } #pos_h_cread span{ filter:alpha(opacity=70); opacity:.7; border-color: transparent transparent #000 transparent; border-style: solid; border-width: 0px 15px 10px 15px; height: 0px; width: 0px; position:absolute; top:-10px; left:50px; } #pos_h_cread p{ color:#fff;font-size:12px;line-height:18px; } </style> </head> <body style="height:3000px;"> <div id="a" style="padding:50px;background:#ff0;position:relative;"> <div id="b" style="padding:40px;background:#f00;position:fixed;"> <table id="examTable" class="common-table"> <tr> <th class="common-table-th">序号</th> <th class="common-table-th th-work-name">考试名称</th> <th class="common-table-th">布置时间</th> <th class="common-table-th">修改初始分</th> <th class="common-table-th">修改终版分</th> <th class="common-table-th">修改最高分</th> <th class="common-table-th">修改次数</th> </tr> <tr> <td class="common-table-td">1</td> <td class="common-table-td ell tooltip" rel="张月华张月华演示张月华演示张月华演示张月华演示张月华演示张月华演示张月华演示演示">张月华演示</td> <td class="common-table-td">2016-06-01</td> <td class="common-table-td"> -- </td> <td class="common-table-td"> -- </td> <td class="common-table-td"> -- </td> <td class="common-table-td">0</td> </tr> <tr> <td class="common-table-td">1</td> <td class="common-table-td ell tooltip" rel="张月华张月华演示张月华演示张月华演示张月华演示张月华演示张月华演示张月华演示演示">张月华演示</td> <td class="common-table-td">2016-06-01</td> <td class="common-table-td"> -- </td> <td class="common-table-td"> -- </td> <td class="common-table-td"> -- </td> <td class="common-table-td">0</td> </tr> <tr> <td class="common-table-td">1</td> <td class="common-table-td ell tooltip" rel="张月华张月华演示张月华演示张月华演示张月华演示张月华演示张月华演示张月华演示演示">张月华演示</td> <td class="common-table-td">2016-06-01</td> <td class="common-table-td"> -- </td> <td class="common-table-td"> -- </td> <td class="common-table-td"> -- </td> <td class="common-table-td">0</td> </tr> </tbody> </table> </div> </div> </body> </html> <script> var tooltip = { getpos:function(element,dom){ if ( arguments.length == 0 || element == null ) { return null; } var offsetTop = element.offsetTop; var offsetLeft = element.offsetLeft; var offsetWidth = element.offsetWidth; var offsetHeight = element.offsetHeight; while( element = element.offsetParent ) { if(element == dom){ return { absoluteTop: offsetTop, absoluteLeft: offsetLeft, offsetWidth: offsetWidth, offsetHeight: offsetHeight }; } offsetTop += element.offsetTop; offsetLeft += element.offsetLeft; } return { absoluteTop: offsetTop, absoluteLeft: offsetLeft, offsetWidth: offsetWidth, offsetHeight: offsetHeight }; }, isSelector:function(){ return !! document.querySelector ? true : false; }, init:function(dom){ var box = []; if(this.isSelector()){ box = document.querySelectorAll('.tooltip'); }else{ var a = []; var elm = document.getElementsByTagName('*'); var _l = elm.length; for(var i=0;i<_l;i++){ if(/\s*tooltip\s*/.test(elm[i].className)){ a.push(elm[i]); } } box = a; } for(var i=0;i< box.length;i++){ box[i].onmouseover = function(){ var _this = this; var pos = tooltip.getpos(_this,dom); var div = document.createElement('div'); var p = document.createElement('p'); var span = document.createElement('span'); var text = _this.getAttribute('rel'); p.innerHTML = text; div.appendChild(p); div.appendChild(span); div.id = 'pos_h_cread'; div.style.left = pos.absoluteLeft + 'px'; div.style.top = (pos.absoluteTop + pos.offsetHeight)+ 'px'; if(dom){ dom.appendChild(div); }else{ document.getElementsByTagName("body")[0].appendChild(div); } } box[i].onmouseout = function(){ var n = document.getElementById('pos_h_cread'); if(n && n.parentNode && n.tagName != 'BODY'){ n.parentNode.removeChild(n); } } } } } tooltip.init(document.querySelector('#b')); </script>
