Создание содержимого из jQuery

Question

Я работаю над модулем всплывающей подсказки jQuery для личного использования. В моем коде я использую функции mousemove и mouseout jQuery для создания всплывающей подсказки. Однако, когда я перемещаю мышь над элементом, он попадает в оператор if в функции построения и говорит, что всплывающая подсказка должна быть там, хотя я вижу в Firebug и в инструментах Chrome Dev, что это не так.

$.fn.tooltip = function(userOptions) 
{ 
    var defaultOptions = { 
           position: '', 
           follow: true 
          }; 

    var options = $.extend(defaultOptions, userOptions); 

    $(this).mouseenter(function() 
    { 
     var title = $(this).data('title'); 

     build(title, options.position, options.follow); 

     var top, left; 

     var tooltip = $('#tooltip'); 

     if (tooltip.hasClass('top')) 
     { 
      top = $(this).offset().top - ($(this).height() * 2) - 10; 
      left = $(this).offset().left; 
     } 

     else if (tooltip.hasClass('right')) 
     { 
      top = $(this).offset().top - ($(this).height()/2); 
      left = $(this).offset().left + tooltip.width(); 
     } 

     else if (tooltip.hasClass('bottom')) 
     { 
      top = $(this).offset().top + $(this).height() + 10; 
      left = $(this).offset().left; 
     } 

     else if (tooltip.hasClass('left')) 
     { 
      top = $(this).offset().top - ($(this).height()/2); 
      left = $(this).offset().left - (tooltip.width() * 1.5); 
     } 

     tooltip.css('top', top).css('left', left).show(); 

    }); 

    $(this).mousemove(function(e) 
    { 
     if (options.position === "" || options.position === undefined || options.follow === true) 
     { 
      var title = $(this).data('title'); 

      build(title, options.position, options.follow); 

      var top = e.pageY + 25; 
      var left = e.pageX + 10; 

      $('#tooltip').css('top', top).css('left', left).show(); 
     } 
    }); 

    $(this).mouseout(function() 
    { 
     $('#tooltip').hide(); 
    }); 

    function build(title, position, follow) 
    { 
     if ($('#tooltip')) 
     { 
      console.log("The tooltiop should be on the page."); 
      $('#tooltip-content > p').text = title; 
     } 

     else 
     { 
      console.log("Position is: " + position); 

      var markup = '<div id="tooltip" class=' + position + '">'; 
       markup += '<div id="tooltip-content">'; 
       markup += '<p>' + title + '</p>'; 
       markup += '<span id="tooltip-arrow"></span>'; 
       markup += '</div>'; 
       markup += '</div>'; 

      $('body').append(markup); 
     } 
    } 
}; 

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

Answer 1

В функции сборки изменить проверку в случае, как:

if ($('#tooltip').lenght) { 

, который вернет ложь, если #tooltip еще не прилагается к телу и истинным, если оно есть. $ ('# tooltip') всегда будет возвращать объект jQuery, поэтому он никогда не будет false, но его длина будет 0, поэтому false, если элемент подсказки еще не добавлен в тело.

jsFiddle

С уважением.