var IeAuto = navigator.userAgent.indexOf('MSIE') > -1; //判断是不是Ie浏览器 并赋值给变量 window.onload=function(){ function show(obj,id,html,width,height){ if(document.getElementById(id)==null){ //判断创建出来的div的id是否为空 var div = document.createElement('div'); //创建div div.className = 'tooltip-box'; //给创建的div 添加一个 classs div.id = id; //给创建的div 添加一个 id div.innerHTML = html; //创建div显示的内容 div.style.width = width?width+'px':'auto'; //设置div宽度 IE不支持 atuo if(!width && IeAuto){ //如果 没有设置宽度并且是ie浏览器 div.style.width = div.offsetWidth; //在没有设置宽度和不支持auto的ie浏览器下 将div宽度设置成浏览器渲染出来的宽度 } obj.appendChild(div); //讲div插入在obj对象里面 (就是a标签) div.style.position = 'absolute'; //给创建出来的div 一个绝对定位属性 //设置提示框的边界 var win = document.body.clientWidth||document.documentElement.clientWidth; var l = obj.offsetLeft, //获取a标签的left top值 t = obj.offsetTop; if(l+div.offsetWidth > win ){ //obj left值与提示框宽度的值 > 浏览器窗口值 var dmo = document.getElementById('demo'); l = win - div.offsetWidth - dmo.offsetLeft; if(l<0){l=0 } } div.style.left = l + 'px'; //创建出来的div 的left top值 等于 a标签的left top值 div.style.top = (t+20) + 'px'; obj.onmouseleave=function(){ //鼠标离开的时候 div 隐藏 setTimeout 延时效果 setTimeout(function(){ document.getElementById(id).style.display = 'none'; },300); } }else{ //显示 document.getElementById(id).style.display = 'block'; } }; var t1 = document.getElementById('tooltip1'); t1.onmouseenter=function(){ show(this,'t1','12334',200); } }