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

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>

只有我查看源代码页面（生成的 HTML）中与“a”标记内的“span”标记相关的部分丢失了！！

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

- Susie

---

xmlHttpRequest.onreadystatechange=function(){ if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ document.getElementById("details").innerHTML = xmlHttpRequest.responseText; } } - 这段代码是否有效？也许它没有返回有效的响应，所以无法显示内容？ - nycynik

是的，它有效。我使用了onClick()而不是onmouseover，并在页面底部显示数据而不是工具提示，然后它被显示出来了。 - Susie

Answer 1

我假设你正在动态生成要显示的数据，并且有多行数据。如果是这样的话，那么表格中所有span标签的id都将是相同的("details")。你需要能够区分两行数据。你可以在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;
.
...
}

- Paige

Answer 2

你能查看源代码并展示生成的HTML吗？我尝试过这个方法，当进行快速测试时似乎可以正常工作。

- sjramsay

---

我已经在问题的末尾添加了相关部分的视图源代码。由于某种原因，当我查看源代码时，<a>标签内部的<span>标签不见了。 - Susie

尝试去掉<c:out value...标签，看看是否能正常工作。这样至少我们知道它可以工作，并且您的span标签会在视图源中显示出来。 - sjramsay