js代码使用的是来自zcool的一段代码，好像是个老外的，可惜没找到地址。
 
script.js:
 
//封装的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);
        
         //生成形式如下:
         /*
            

              

              

              

            

         */
        
        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);
    } //隐藏方法
    
  }; //返回一个对象
}();
 
 
style.css:
 
* { 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(p_w_picpaths/tt_left.gif) top left no-repeat}
#tttop { display: block; height: 5px; margin-left: 5px; background: url(p_w_picpaths/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(p_w_picpaths/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;
}
 
 
index.html:
 
< !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>');" onmouseout="tooltip.hide();">鼠标移上来 span> p>
   < p >
    这里测试连接
     < span     class ="hotspot" onmouseover="tooltip.show('

>网易 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('/>');" onmouseout="tooltip.hide();">图片 span> p>
div>
< script type ="text/javascript" language ="javascript" src ="script.js" > script>
body>
html>

 
 
显示:
 
js实现tooltips_第1张图片