js实现tooltips

//封装的tooltip 
var tooltip= function(){ 
   var id = 'tt'; //tooltip的id#tt 
   var top = 3; 
   var left = 3; 
   var maxw = 300; 
   var speed = 10; 
   var timer = 20; //定时间隔20ms 
   var endalpha = 95; //最终不透明度95% 
   var alpha = 0; //不透明度 
   var tt,t,c,b,h; 
   var ie = document.all ?  true :  false; 
   return { 
    show: function(v,w){ 
       if(tt ==  null){ 
        tt = document.createElement('div'); 
        tt.setAttribute('id',id); //设置创建的div的id属性 
            
        t = document.createElement('div'); 
        t.setAttribute('id',id + 'top'); //#tttop 
            
        c = document.createElement('div'); 
        c.setAttribute('id',id + 'cont'); //内容部分#ttcont 
         
        b = document.createElement('div'); 
        b.setAttribute('id',id + 'bot'); //底部#ttbot 
         
        tt.appendChild(t); 
        tt.appendChild(c); 
        tt.appendChild(b); 
         
         //生成形式如下: 
         /* 
            <div id="tt"> 
              <div id="tttop"></div> 
              <div id="ttcont"></div> 
              <div id="ttbot"></div> 
            </div> 
         */ 
         
        document.body.appendChild(tt); 
        tt.style.opacity = 0; //对于火狐等用css属性设置不透明度 
        tt.style.filter = 'alpha(opacity=0)'; //对于ie使用滤镜 
        document. =  this.pos; 
      } 
      tt.style.display = 'block'; 
      c.innerHTML = v; //v为要显示的html内容 
      tt.style.width = w ? w + 'px' : 'auto'; 
       if(!w && ie){ 
        t.style.display = 'none'; 
        b.style.display = 'none'; 
        tt.style.width = tt.offsetWidth; 
        t.style.display = 'block'; 
        b.style.display = 'block'; 
      } 
       if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'} 
      h = parseInt(tt.offsetHeight) + top; 
      clearInterval(tt.timer); 
      tt.timer = setInterval( function(){tooltip.fade(1)},timer); //返回值可以作为定时ID,清理时使用 
    }, //显示方法 
        
    pos: function(e){ 
       var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY; 
       var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX; 
      tt.style.top = (u - h) + 'px'; 
      tt.style.left = (l + left) + 'px'; 
    }, 
    fade: function(d){ 
       var a = alpha; 
       if((a != endalpha && d == 1) || (a != 0 && d == -1)){ 
         var i = speed; 
         if(endalpha - a < speed && d == 1){ 
          i = endalpha - a; 
        } else  if(alpha < speed && d == -1){ 
          i = a; 
        } 
        alpha = a + (i * d); 
        tt.style.opacity = alpha * .01; 
        tt.style.filter = 'alpha(opacity=' + alpha + ')'; 
      } else{ 
        clearInterval(tt.timer); //清除定时 
         if(d == -1){tt.style.display = 'none'} //如果是隐藏则设置display 
      } 
    }, 
        
    hide: function(){ 
      clearInterval(tt.timer); 
      tt.timer = setInterval( function(){tooltip.fade(-1)},timer); 
    } //隐藏方法 
     
  }; //返回一个对象 
}();

* { margin: 0;  padding: 0}  
html 
{  
background-color: #fff; 
}  
body    
{  
font: 12px/1.5 Verdana, Arial, Helvetica, sans-serif;  
background-color: #efefef;  
width: 1000px;  
margin: 0 auto; 
}  

/*tooltip样式定义*/ 

#text { margin: 50px auto;  width: 500px}  
.hotspot { color: #900;  padding-bottom: 1px;  border-bottom: 1px dotted #900;  cursor: pointer}  

#tt { position: absolute;  display: block;  background: url(images/tt_left.gif) top left no-repeat}  
#tttop { display: block;  height: 5px;  margin-left: 5px;  background: url(images/tt_top.gif) top right no-repeat;  overflow: hidden}  
#ttcont { display: block;  padding: 2px 12px 3px 7px;  margin-left: 5px;  background: #666;  color: #FFF}  
#ttbot { display: block;  height: 5px;  margin-left: 5px;  background: url(images/tt_bottom.gif) top right no-repeat; overflow: hidden}  

/*demo div样式定义*/ 

#divDemo 
{  
padding: 30px; 
}  
#divDemo p 
{  
width: 200px;  
border: 1px solid #efefef;  
background-color: #fff;  
margin: 0 auto; 
}

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 
< html  xmlns ="http://www.w3.org/1999/xhtml" > 
< head > 
< meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8"  /> 
< title >JavaScript Tooltips 演示 </title> 
< link  rel ="stylesheet"  type ="text/css"  href ="style.css"  /> 
</head> 
< body > 
< div  id ="divDemo" > 
   < p >这里是测试普通文本 < span  class ="hotspot" onmouseover="tooltip.show('测试1 <strong >测试加粗 </strong>');" onmouseout="tooltip.hide();">鼠标移上来 </span> </p> 
   < p > 
    这里测试连接 
     < span     class ="hotspot" onmouseover="tooltip.show('<h3 >网易 </h3> < strong >[url]http://www.163.com[/url] </strong>');" onmouseout="tooltip.hide();"> 
     < a  href ="http://www.163.com" >网易 </a> 
     </span> 
   </p> 
   < p >测试图片 < span  class ="hotspot" onmouseover="tooltip.show('<img src=\'images/bofu.gif\' />');" onmouseout="tooltip.hide();">图片 </span> </p> 
</div> 
< script  type ="text/javascript"  language ="javascript"  src ="script.js" > </script> 
</body> 
</html>

本文转自 xcf007 51CTO博客，原文链接：http://blog.51cto.com/xcf007/107757，如需转载请自行联系原作者