Search code examples
jquerypopupcursor-position

Unable to get this popup to go above the cursor

Ok, so I have this jsfiddle here: http://jsfiddle.net/9RxLM/1751/

I am using it exactly like that in my page, because I have no access to the head tag, only the body for now.

I don't understand how I can give it a .css({marginTop: '-1em'}). in the actual jQuery, and than even in the .popup CSS give it another negative margin top (margin: -1.5em 10% 0;), but yet it still doesn't obey and wants to display whereever it wants to display.

How can I get this to popup so that the cursor is underneath of the popup when the cursor is over the question mark?

Solution

  • To position something above the cursor, you first need the coordinates of the cursor. What you need is event.pageX and event.pageY, then set the CSS top and left properites relative to the mouse coordinates.

    I changed this line in your fiddle:

    jQuery(this).prevAll("span.popup:first").stop(true, true).css({top: event.pageY-20}).fadeIn('slow', function() {
     jQuery(this).nextAll("span.parent:first").stop(true, true).addClass("backdrop");

    Here it is working:

    http://jsfiddle.net/9RxLM/1754/