包含动态信息的工具提示弹出窗口

Question

我想要做的是，当你将鼠标悬停在一个名称上时，会显示一个工具提示弹出窗口，其中包含该名称的详细信息。

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

只有我的view source page(生成的html)："span“标记中"a”标记内的相关部分丢失了！！

<tr id="tooltip">               
    <td onmouseover ="showDetails('NRT')"><a href="#">NRT</a> </td> 
</tr>    
.
.
.
...  
<span id="details">*****************</span>

Answer 1

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

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

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

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

确保将索引作为参数传递给javascript函数，并进行以下更改。

function showDetails(name, index){
..
...
document.getElementById("stopsInfo"+index).innerHTML = xmlHttpRequest.responseText;
.
...
}

Answer 2

您可以查看源代码，并向我们展示了生成的HTML。我试过了，当我做一个快速测试时，它似乎工作得很好。