如何让html标签title属性现实内容时间变长

首先写几个方法

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

//获取当前的x坐标值
function pageX(elem){
	return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft;
}
//获取当前的Y坐标值
function pageY(elem){
	return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop;
}

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

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

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

var title_value = ''; 
function title_show(pSpan) {	
	var span=document.getElementById(pSpan)
	var div=document.getElementById("title_show");		
	title_value = span.title;	
	div.style.left = pageX(span)+200+'px';
	div.style.top = pageY(span)+'px';
	var words_per_line = 40;	 //每行字数	
	var title =  split_str(span.title,words_per_line);	//按每行25个字显示标题内容。	
	div.innerHTML = title;	
	div.style.display = '';	
	span.title = '';		//去掉原有title显示。
}
function title_back(pSpan) {
	var span=document.getElementById(pSpan)	
	var div=document.getElementById("title_show");		
	span.title = title_value;	
	div.style.display = "none";
}

 

<table border="1">
	<tr>
	<td >
		<span style="" id="span1" title ='这里是很长很长很长很长很长	很长很长很长很长很长很长很长很长很长	很长很长很长很长很长很长很长很长很长	很长很长很长很长很长很长很长很长很长	很长很长很长很长很长很长很长很长很长的标题'
		onmouseover="title_show('span1');" onmouseout="title_back('span1');">
		鼠标在这悬停显示标题
		</span>
	</td>
	<td>测试1</td>
	<td>测试2</td>
	<td>测试3</td>
	<td>测试4</td>
	</tr>
	<tr>
	<td >
	<span style="" id="span2" title ='这里是很长很长很长很长很长	很长很长很长很长很长很长很长很长很长	'
	onmouseover="title_show('span2');" onmouseout="title_back('span2');">
	鼠标在这悬停显示标题
	</span>
	</td>
	<td>测试1</td>
	<td>测试2</td>
	<td>测试3</td>
	<td>测试4</td>
	</tr>
	<tr>
	<td >
	<span style="" id="span3" title ='测试title'
		onmouseover="title_show('span3');" onmouseout="title_back('span3');">
		鼠标在这悬停显示标题
	</span>
	</td>
	<td>测试1</td>
	<td>测试2</td>
	<td>测试3</td>
	<td>测试4</td>
	</tr>
</table>
<span id='title_show' style='position: absolute; display: none; border: solid 1px #999999; background: #edeef0;'></span>