How to position a pop up element on mouse position coordinates with jquery

Here is a simple yet useful trick to position a tooltip (a div element etc) near the mouse click or pointer position using jQuery. In the example here, we have a tool tip (div) with id “tooltip”, a href tag, on clicking which the pop up is positioned and a snippet of code to place anywhere on the page. Obviousaly this small function can be used to return mouse event coordinates by makeing slightest changes.

I have not tested this code jquery version prior to 1.3.2.

So, here is the javascript code:

$(document).ready(function()  {
  $("#tooltip_link").click(function(e){
    var x = e.pageX;
    var y = e.pageY;
    alert(x +', '+ y);
    $("#tooltip").css({"top":y, "left":x, "position":"absolute"});
    $(this).unbind('click');
  });
}

The code line below is used to stop click event when action is already over:

$(this).unbind('click');

And href and div tag html code:

CLICK





Once there was a man who lived in a forest. He ate in the forest and slept in the forest. 
He was very happy living in the forest. At last he died in the forest. No one knows why the man 
lived in the forest. I know this is not a happy story. The end!

Share on Facebook

Tweet

Follow us

Save