Question

What I am trying to do is when you hover over a name, show a tooltip popup with details of that name.

I did the following but for some reason, it doesn’t seem to work. No tooltip shows up. When you hover over a name it calls a function and does an AJAX request and we get back details as string. I have verified that the function works fine and returns string.

I just can’t seem to be able to get that returned string into the tooltip popup. I am testing this on IE8

Javascript Function:

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 page:

<tr id="tooltip">
    <td onmouseover="showDetails('${name}')">
        <a href="#"><c:out value="${name}"><span id="details"></span></c:out></a> 
    </td>
</tr>

Only the relevant part of my view source page(generated html): “span” tag inside the “a” tag is missing!!

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

Answer 1

I am assuming you are generating your data that’s being displayed dynamically and that you have more than one row.

If so, then all the span tag in your table will have the same id(“details”). You have to be able to distinguish between two rows.

What you can do is add a number to the id and increment the number as you go to the next row, so that each span tag has unique id.

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

be sure to pass the index as an argument to your javascript function and make the following change.

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