我正在尝试的是,当鼠标悬停在一个名字上时,显示一个包含该名字详细信息的工具提示弹出窗口。
我尝试了以下代码,但某些原因它似乎不起作用。没有工具提示弹出窗口显示。当你悬停在一个名字上时,它调用一个函数并执行一个AJAX请求,我们会得到一个字符串形式的详细信息。我已经验证了函数正常工作并返回字符串。
我只是似乎无法将返回的字符串放入工具提示弹出窗口中。我在IE8上测试这个功能。
Javascript函数:
JSP 页面:
只有我查看源代码页面(生成的 HTML)中与“a”标记内的“span”标记相关的部分丢失了!!
我尝试了以下代码,但某些原因它似乎不起作用。没有工具提示弹出窗口显示。当你悬停在一个名字上时,它调用一个函数并执行一个AJAX请求,我们会得到一个字符串形式的详细信息。我已经验证了函数正常工作并返回字符串。
我只是似乎无法将返回的字符串放入工具提示弹出窗口中。我在IE8上测试这个功能。
Javascript函数:
function showDetails(name){
var xmlHttpRequest;
if(window.XMLHttpRequest){
xmlHttpRequest = new XMLHttpRequest();
}else{
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP>");
}
xmlHttpRequest.onreadystatechange=function(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
document.getElementById("details").innerHTML = xmlHttpRequest.responseText;
}
}
xmlHttpRequest.open("GET", "showStopsInfoPopup.do?name="+name, true);
xmlHttpRequest.send();
}
CSS
#tooltip { position: relative; }
#tooltip a{text-decoration: none;}
#tooltip a span { display: none; color: #FFFFFF; }
#tooltip a:HOVER span { display: block; position: absolute;
width: 200px; background-color: #aaa;
height: 50px; color: #FFFFFF; padding: 5px; }
JSP 页面:
<tr id="tooltip">
<td onmouseover="showDetails('${name}')">
<a href="#"><c:out value="${name}"><span id="details"></span></c:out></a>
</td>
</tr>
只有我查看源代码页面(生成的 HTML)中与“a”标记内的“span”标记相关的部分丢失了!!
<tr id="tooltip">
<td onmouseover ="showDetails('NRT')"><a href="#">NRT</a> </td>
</tr>
.
.
.
...
<span id="details">*****************</span>