标签title属性现实内容时间变长，重写标签的onmouseover、onmouseou方法

首先写几个方法

1、获取标签绝对位置方法

Js代码  

1. //获取当前的x坐标值  
2. function pageX(elem){  
3.     return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft;  
4. }  
5. //获取当前的Y坐标值  
6. function pageY(elem){  
7.     return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop;  
8. }  

 2、处理需要现实的文字内容

Js代码  

1. function split_str(string,words_per_line) {   
2.     var output_string = string.substring(0,1);  //取出i=0时的字，避免for循环里换行时多次判断i是否为0   
3.     for(var i=1;i<string.length;i++) {         
4.         if(i%words_per_line == 0) {           
5.             output_string += "<br/>";       
6.         }         
7.         output_string += string.substring(i,i+1);     
8.     }     
9.     return output_string;  
10. }  

 3、鼠标移入移出触发事件

Js代码  

1. var title_value = '';   
2. function title_show(pSpan) {      
3.     var span=document.getElementById(pSpan)  
4.     var div=document.getElementById("title_show");        
5.     title_value = span.title;     
6.     div.style.left = pageX(span)+200+'px';  
7.     div.style.top = pageY(span)+'px';  
8.     var words_per_line = 40;     //每行字数   
9.     var title =  split_str(span.title,words_per_line);  //按每行25个字显示标题内容。      
10.     div.innerHTML = title;    
11.     div.style.display = '';   
12.     span.title = '';        //去掉原有title显示。  
13. }  
14. function title_back(pSpan) {  
15.     var span=document.getElementById(pSpan)   
16.     var div=document.getElementById("title_show");        
17.     span.title = title_value;     
18.     div.style.display = "none";  
19. }  

 

Html代码  

1. <table border="1">  
2.     <tr>  
3.     <td >  
4.         <span style="" id="span1" title ='这里是很长很长很长很长很长  很长很长很长很长很长很长很长很长很长  很长很长很长很长很长很长很长很长很长  很长很长很长很长很长很长很长很长很长  很长很长很长很长很长很长很长很长很长的标题'  
5.         onmouseover="title_show('span1');" onmouseout="title_back('span1');">  
6.         鼠标在这悬停显示标题  
7.         </span>  
8.     </td>  
9.     <td>测试1</td>  
10.     <td>测试2</td>  
11.     <td>测试3</td>  
12.     <td>测试4</td>  
13.     </tr>  
14.     <tr>  
15.     <td >  
16.     <span style="" id="span2" title ='这里是很长很长很长很长很长  很长很长很长很长很长很长很长很长很长  '  
17.     onmouseover="title_show('span2');" onmouseout="title_back('span2');">  
18.     鼠标在这悬停显示标题  
19.     </span>  
20.     </td>  
21.     <td>测试1</td>  
22.     <td>测试2</td>  
23.     <td>测试3</td>  
24.     <td>测试4</td>  
25.     </tr>  
26.     <tr>  
27.     <td >  
28.     <span style="" id="span3" title ='测试title'  
29.         onmouseover="title_show('span3');" onmouseout="title_back('span3');">  
30.         鼠标在这悬停显示标题  
31.     </span>  
32.     </td>  
33.     <td>测试1</td>  
34.     <td>测试2</td>  
35.     <td>测试3</td>  
36.     <td>测试4</td>  
37.     </tr>  
38. </table>  
39. <span id='title_show' style='position: absolute; display: none; border: solid 1px #999999; background: #edeef0;'></span>