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:

Hi
         


        

Answer 1

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.