Java 带有动态信息的工具提示弹出窗口

Java 带有动态信息的工具提示弹出窗口,java,css,html,jsp,tooltip,Java,Css,Html,Jsp,Tooltip,我想做的是,当你将鼠标悬停在一个名字上时,显示一个带有该名字详细信息的工具提示弹出窗口 我做了以下操作,但出于某种原因,它似乎不起作用。没有工具提示显示。当您将鼠标悬停在一个名称上时,它将调用一个函数并执行一个AJAX请求,我们将以字符串的形式返回详细信息。我已经验证了该函数工作正常并返回字符串 我似乎无法将返回的字符串放入工具提示弹出窗口。我正在IE8上测试这个 Javascript函数: function showDetails(name){ var xmlHttpRequest;

我想做的是,当你将鼠标悬停在一个名字上时,显示一个带有该名字详细信息的工具提示弹出窗口

我做了以下操作,但出于某种原因,它似乎不起作用。没有工具提示显示。当您将鼠标悬停在一个名称上时,它将调用一个函数并执行一个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

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>

.
.
.
...  
*****************

您可以查看源代码并向我们显示生成的HTML吗。我尝试了这个方法,在进行快速测试时,它似乎可以正常工作。

我假设您正在生成动态显示的数据,并且您有多行

如果是这样,那么表中的所有span标记都将具有相同的id(“详细信息”)。你必须能够区分两行

您可以做的是在id中添加一个数字,并在转到下一行时增加该数字,以便每个span标记都具有唯一的id

<a href="#"><c:out value="${name}"><span id="details${index}"></span></c:out></a> 

xmlHttpRequest.onreadystatechange=function(){if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){document.getElementById(“详细信息”).innerHTML=xmlHttpRequest.responseText;}是否有效?可能它没有显示是因为它没有返回有效的响应?是的,它有效。。我做了onClick()而不是onmouseover,并在页面底部显示数据而不是工具提示,结果显示出来。我在问题的末尾添加了视图源的相关部分。由于某些原因,当我查看源代码时,标记中的span标记不存在。请尝试删除
<a href="#"><c:out value="${name}"><span id="details${index}"></span></c:out></a> 
function showDetails(name, index){
..
...
document.getElementById("stopsInfo"+index).innerHTML = xmlHttpRequest.responseText;
.
...
}