Распространение событий javascript через всплывающую подсказку

Question

Вот jfiddle для того, чего я пытаюсь достичь: http://jsfiddle.net/fmvmA/

У меня есть две проблемы, с которыми я сталкиваюсь в этом примере; оба из которых я полагаю, связаны с распространением событий. Когда мышь входит в контейнер, я бы хотел, чтобы div следовал за курсором. Когда курсор покидает контейнер, следующий div должен исчезнуть. Кажется, это должно быть просто ... но у меня возникают проблемы с мерцанием div при перемещении мыши, я думаю, что технически мышь покидает контейнер, когда появляется div с верхней панелью инструментов.

Кроме того, я хотел бы иметь возможность щелкнуть в любом месте внутри контейнера и добавить копию div всплывающей подсказки к позиции, по которой был выполнен щелчок. Пример очень привередливый ... но если вы установите смещение так, чтобы div всплывающей подсказки больше не перекрывал мышь, вы можете увидеть, как он работает.

Есть ли простой способ достичь моих двух целей? Заранее спасибо.

Answer 1

Вот демонстрация, которая работает, вам нужно немного отрегулировать положение добавления. Я остался с методом добавления только по клику согласно оригинальной демонстрации

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

Answer 2

Мерцает, потому что вызывает указатель мыши при отображении всплывающей подсказки, так как #ghost находится за пределами контейнера. Переместите его внутрь, и все должно быть установлено.*

HTML:

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

Редактировать: При обнаружении внутри контейнера обнаружена ошибка, что #ghostне скрывает даже перемещение вне контейнера ... поэтому я добавил смещение к #ghost, чтобы оно отображалось 2px под курсором.

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
    });
});