工具提示彈出動態信息

我想要做的是當你將鼠標懸停在名稱上時，顯示一個工具提示窗口，其中包含該名稱的詳細信息。工具提示彈出動態信息

我做了以下，但由於某種原因，它似乎並沒有工作。沒有工具提示出現。當你將鼠標懸停在一個名字上時，它會調用一個函數並執行一個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

工具提示彈出動態信息

回答

相關問題