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