ToolTip效果通过Js实现代替超链接中的title

 1  <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
 2  < html >
 3  < head >
 4       < title > 自定义Tooltip特效 </ title >
 5       < style  type ="text/css" >
 6          body ul
 7           {
 8              list-style :  none ;
 9           }
10          
11          body li
12           {
13              margin :  60px ;
14           }
15          
16          div
17           {
18              border :  1px solid #CCC ;
19              padding :  10px ;
20              background :  #dff5ff ;
21              margin-left :  30px ;
22           }
23       </ style >
24       <!-- 通过js，代替超链接中的title -->
25       < script  language ="javascript"  type ="text/javascript" >
26           function  initEvent() {
27               var  links  =  document.getElementsByTagName( " a " );
28 
29               for  ( var  i  =   0 ; i  <  links.length; i ++ ) {
30                   var  link  =  links[i];
31                  link.onmouseover  =  linkOnMouseOver;
32                  link.onmouseout  =  linkOnMouseOut;
33              }
34          }
35 
36           function  linkOnMouseOver() {
37               var  newdiv  =  document.createElement( " div " );
38              newdiv.className  =   " Tooltip " ;
39              newdiv.style.position  =   " absolute " ;
40              newdiv.style.top  =  window.event.clientY;
41              newdiv.style.left  =  window.event.clientX;
42 
43              newdiv.innerHTML  =   " 我是自定义的Tooltip，用来代替超链接中的title " ;
44              document.body.appendChild(newdiv);
45          }
46 
47           function  linkOnMouseOut() {
48               var  divs  =  document.getElementsByTagName( " div " );
49               for  ( var  i  =   0 ; i  <  divs.length; i ++ ) {
50                   var  newdiv  =  divs[i];
51                   if  (newdiv.className  ==   " Tooltip " ) {
52                      document.body.removeChild(newdiv);

53                  }
54              }
55          }
56       </ script >
57  </ head >
58  < body  onload ="initEvent()" >
59       < ul >
60           < li >< a  href ="#"  title ="百度搜索引擎"  target ="_blank" > 百度 </ a ></ li >
61           < li >< a  href ="#"  title ="今天你山寨了吗？"  target ="_blank" > 腾讯 </ a ></ li >
62           < li >< a  href ="#"  title ="新浪微博"  target ="_blank" > 新浪 </ a ></ li >
63           < li >< a  href ="#"  title ="搜你输入法真好用"  target ="_blank" > 搜狐 </ a ></ li >
64       </ ul >
65  </ body >
66  </ html >