Question

In the following function I am passing a parameter pos which contains the position (x & y) value. As you can see I am trying the use these values to place the output of the div tag. For some reason it’s not working. Can any see if anything I’m doing wrong??

The objective of this function is to display the html in the div at the position you hover…

Currently, it is displaying the output of the hover at the bottom of the web page.

Thanks
Chris

featureOver: function(ev,latlng,pos,data)   
{  
    var X = pos.x;  
    var Y = pos.y;  
    alert('X = ' + X + '  ' + 'Y = ' + Y);    
    document.body.style.cursor = "pointer";  
    $("div#over").css("top",  Y + "px");  
    $("div#over").css("left", X + "px");  
    $("div#over").html(data.name);  
},

HTML CODE

<table id=maptable border=2>
<th>
<div id="map_canvas" style="height:500px; width:700px; background-color:white; border:1px solid black; "></div>
<div id="over"></div>
</th>

Answer 1

Try this instead (using offset()):

featureOver: function(ev,latlng,pos,data)   
{  
    var X = pos.x;  
    var Y = pos.y;  
    alert('X = ' + X + '  ' + 'Y = ' + Y);    
    document.body.style.cursor = "pointer";  
    $("div#over").offset().top =  Y + "px";  
    $("div#over").offset().left =  X + "px";  
    $("div#over").html(data.name);  
}