我要做的是,当您将鼠标悬停在名称上时,会显示一个包含该名称详细信息的工具提示弹出窗口。
我做了以下但由于某种原因,它似乎不起作用。没有工具提示出现。当您将鼠标悬停在名称上时,它会调用一个函数并执行 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>