Propagating JavaScript events through a tooltip-like div

Question

Here's the jfiddle for what I'm trying to achieve: http://jsfiddle.net/fmvmA/

I have two issues that I'm facing with this example; both of which I figure are related to event propagation. When the mouse enters the container, I'd like to have a div follow the cursor. When the cursor leaves the container, the following div should disappear. This seems like it should be simple... but I'm experiencing problems with the div flickering as you move the mouse, my guess is because the mouse is technically leaving the container when the tooltop div appears.

Additionally, I'd like to be able to click anywhere inside of the container and append a copy of the tooltip div to the position that was clicked. The example is finicky...but if you set the offset so that the tooltip div is no longer overlapping the mouse then you can see it work.

Is there any simple way to achieve my two goals?

Answer 1

It flickers because it triggers mouseout when the tooltip is shown since the #ghost is outside the container.. Move it inside and it should be all set..

DEMO

HTML:

<div id="container">
  <div id="ghost">
    Click to drop me!
  </div>
</div>

Edit: I noticed a bug when having it inside the container that the #ghost doesn't hide even moving outside container.. so I added an offset to the #ghost so it appears 2px below the cursor.

JS:

$('#container').on('mousemove', function(event) {
    $('#ghost').css({
        left: event.pageX - $('#ghost').width() / 2,
        top: ((event.pageY - $('#ghost').height() / 2) + 2) // +2 px is the offset
    });
});

Answer 2

Here's a demo that works, you'll need to adjust the append positioning a bit. I stayed with the method of appending only on click as per original demo

http://jsfiddle.net/fmvmA/4/