首先写几个方法
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>
?
