怎样写一个某一单元格的tooltip解决思路
日期：2014-05-16 浏览次数：20519 次
怎样写一个某一单元格的tooltip
我想写一个table，在这个table的某一列上，当我鼠标 移动到这一列的某一行时，就会显示不同的tooltip(多行tooltip)，
我在网上查资料，找到的都只是通过 <a href= " " tooltip= " "> XXXXX </a> 的例子，这就要求鼠标要移到这个单元个的某个字段上才会显示tooltip内容，可是我想在鼠标移动到这个td的时候就显示tooltip的内容，请问大家要怎么写？
------解决方案--------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN "
"http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> 无标题文档 </title>
<style>
.Mydiv{background-color:#FFCC00;width:200px;height:200px}
</style>
<SCRIPT>
var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
offsetX = 0;
offsetY = 20;
var toolTipSTYLE= " ";
function initToolTips() {
if(ns4||ns6||ie4) {
if(ns4) toolTipSTYLE = document.toolTipLayer;
else if(ns6) toolTipSTYLE = document.getElementById( "toolTipLayer ").style;
else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;
if(ns4) document.captureEvents(Event.MOUSEMOVE);
else {
toolTipSTYLE.visibility = "visible ";
toolTipSTYLE.display = "none ";
}
document.onmousemove = moveToMouseLoc;
}
}
function toolTip(msg, fg, bg) {
if(toolTip.arguments.length < 1) {// hide
if(ns4) toolTipSTYLE.visibility = "hidden ";
else toolTipSTYLE.display = "none ";
}
else {// show
if(!fg) fg = "#999900 ";
if(!bg) bg = "#FFFFFF ";
var content =
' <table border= "0 " cellspacing= "0 " cellpadding= "1 " bgcolor= " ' + fg + ' "> <td> ' +
' <table border= "0 " cellspacing= "0 " cellpadding= "1 " bgcolor= " ' + bg +
' "> <td align= "center " CLASS=tip> <font face= "sans-serif " color= " ' + fg +
' ">  \; ' + msg +
' \; </font> </td> </table> </td> </table> ';
if(ns4) {
toolTipSTYLE.document.write(content);
toolTipSTYLE.document.close();
toolTipSTYLE.visibility = "visible ";
}
if(ns6) {
document.getElementById( "toolTipLayer ").innerHTML = content;
toolTipSTYLE.display= 'block '
}
if(ie4) {
document.all( "toolTipLayer ").innerHTML=content;
toolTipSTYLE.display= 'block '
}
}
}
function moveToMouseLoc(e) {
if(ns4||ns6) {
x = e.pageX;
y = e.pageY;
}
else {
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
}
toolTipSTYLE.left = x + offsetX;
toolTipSTYLE.top = y + offsetY;
return true;
} </SCRIPT>
</head>
<body>
<DIV id=toolTipLayer style= "VISIBILITY: hidden; POSITION: absolute "> </DIV>
<SCRIPT language=JavaScript> <!--
initToolTips(); //--> </SCRIPT>
<table border= "1 " id= "table ">
<tr>
<td id= "1.1 " onMouseOver= "toolTip(this.id) " onmouseout=toolTip() >
</td>
<td id= "1.2 " onMouseOver= "toolTip(this.id) " onmouseout=toolTip() >
</td>
<tr>
&l
我想写一个table，在这个table的某一列上，当我鼠标 移动到这一列的某一行时，就会显示不同的tooltip(多行tooltip)，
我在网上查资料，找到的都只是通过 <a href= " " tooltip= " "> XXXXX </a> 的例子，这就要求鼠标要移到这个单元个的某个字段上才会显示tooltip内容，可是我想在鼠标移动到这个td的时候就显示tooltip的内容，请问大家要怎么写？
------解决方案--------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN "
"http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> 无标题文档 </title>
<style>
.Mydiv{background-color:#FFCC00;width:200px;height:200px}
</style>
<SCRIPT>
var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
offsetX = 0;
offsetY = 20;
var toolTipSTYLE= " ";
function initToolTips() {
if(ns4||ns6||ie4) {
if(ns4) toolTipSTYLE = document.toolTipLayer;
else if(ns6) toolTipSTYLE = document.getElementById( "toolTipLayer ").style;
else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;
if(ns4) document.captureEvents(Event.MOUSEMOVE);
else {
toolTipSTYLE.visibility = "visible ";
toolTipSTYLE.display = "none ";
}
document.onmousemove = moveToMouseLoc;
}
}
function toolTip(msg, fg, bg) {
if(toolTip.arguments.length < 1) {// hide
if(ns4) toolTipSTYLE.visibility = "hidden ";
else toolTipSTYLE.display = "none ";
}
else {// show
if(!fg) fg = "#999900 ";
if(!bg) bg = "#FFFFFF ";
var content =
' <table border= "0 " cellspacing= "0 " cellpadding= "1 " bgcolor= " ' + fg + ' "> <td> ' +
' <table border= "0 " cellspacing= "0 " cellpadding= "1 " bgcolor= " ' + bg +
' "> <td align= "center " CLASS=tip> <font face= "sans-serif " color= " ' + fg +
' ">  \; ' + msg +
' \; </font> </td> </table> </td> </table> ';
if(ns4) {
toolTipSTYLE.document.write(content);
toolTipSTYLE.document.close();
toolTipSTYLE.visibility = "visible ";
}
if(ns6) {
document.getElementById( "toolTipLayer ").innerHTML = content;
toolTipSTYLE.display= 'block '
}
if(ie4) {
document.all( "toolTipLayer ").innerHTML=content;
toolTipSTYLE.display= 'block '
}
}
}
function moveToMouseLoc(e) {
if(ns4||ns6) {
x = e.pageX;
y = e.pageY;
}
else {
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
}
toolTipSTYLE.left = x + offsetX;
toolTipSTYLE.top = y + offsetY;
return true;
} </SCRIPT>
</head>
<body>
<DIV id=toolTipLayer style= "VISIBILITY: hidden; POSITION: absolute "> </DIV>
<SCRIPT language=JavaScript> <!--
initToolTips(); //--> </SCRIPT>
<table border= "1 " id= "table ">
<tr>
<td id= "1.1 " onMouseOver= "toolTip(this.id) " onmouseout=toolTip() >
</td>
<td id= "1.2 " onMouseOver= "toolTip(this.id) " onmouseout=toolTip() >
</td>
<tr>
&l
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
