How to position a popup div based on the position of where the cursor clicks

Question

I am trying to position a popup div below:

<div style="display:none;height:200px;width:200px;border:3px solid green;" id="popup">Hi</div>

based on the clicking of another div.

I am running this on document .ready

$('div#d').bind('click', function (event) {
var offset = $(this).offset();
$('#popup').css('left',offset.left);    
$('#popup').css('top',offset.top);
$('#popup').css('display','inline');        
});

but the above will not even display the div

Answer 1

Try adding position: absolute to your div. Make sure it isn't located within another div that has relative positioning.

<div style="position: absolute; display:none;height:200px;width:200px;border:3px solid green;" id="popup">Hi</div>

Top and left only work for elements with relative, absolute or fixed positioning.

Answer 2

The problem lie in the fact that offset() do not return the correct mouse position, try event.pageX and event.pageY instead:

$(document).ready(function(){
    $('div#d').bind('click', function (event) {
    $('#popup').css('left',event.pageX);      // <<< use pageX and pageY
    $('#popup').css('top',event.pageY);
    $('#popup').css('display','inline');     
    $("#popup").css("position", "absolute");  // <<< also make it absolute!
    });
});

See here.