工具提示弹出动态信息

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

我做了以下，但由于某种原因，它似乎并没有工作。没有工具提示出现。当你将鼠标悬停在一个名字上时，它会调用一个函数并执行一个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>

来源

2012-10-22 Susie

xmlHttpRequest.onreadystatechange =函数（）{ 如果（xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200）{ 的document.getElementById（ “方式”）的innerHTML = xmlHttpRequest.responseText。 } } - 它工作吗？也许它没有显示，因为它没有返回有效的回应？ – nycynik

是的，它的工作原理..我做onClick（）而不是onmouseover，并显示在页面底部的数据，而不是一个工具提示，它得到显示。 – Susie

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

如果是这样，那么表中的所有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; 
. 
... 
}

来源

2012-10-23 17:05:15 Paige

您可以查看源代码并向我们显示生成的HTML。我尝试了这一点，并且在进行快速测试时似乎可以正常工作。

来源

2012-10-22 21:05:25 sjramsay

我在问题的最后添加了视图源的相关部分。出于某种原因，当我执行视图源时，我在标记内的span标记不存在。 – Susie

尝试摆脱span标签周围的 sjramsay

工具提示弹出动态信息

回答

相关问题