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