Добавить несколько элементов на страницу

Question

Я создал плагин подсказки JQuery, и я применяю его к нескольким тегам A.

Для каждого тэга должна быть другая подсказка, связанная с ним, так что я есть:

var $tooltip = $("<div>").attr("id", tooltip.id).attr("class", options.class).appendTo('body'); 

Где подсказке идентификатор включает в себя случайное число создается следующим образом:

id: "Tooltip_" + Math.floor(Math.random() * (9999 - 2000 + 1) + 2000) 

Плагин делает не ведут себя хорошо. Я проверил HTML, добавленный на страницу.

На страницу добавлена ​​только одна всплывающая подсказка ... Всегда то же самое.

Как это исправить? Что я делаю не так? У меня есть пример: http://codepen.io/mdmoura/pen/wgapv

И код плагина заключается в следующем:

$(document).ready(function() { 
    $("table a").Tooltip(); 
}); 

// Tooltip 
(function ($) { 

    $.fn.Tooltip = function (options) { 

    var defaults = {   
     class: 'Tooltip', 
     delay: [200, 200], 
     offset: [0, -10], 
     hide: function ($element, $tooltip) { 
     $tooltip.fadeOut(200); 
     }, 
     show: function ($element, $tooltip) { 
     $tooltip.fadeIn(200); 
     } 
    }; 

    var options = $.extend({}, defaults, options); 
    var tooltip = { id: "Tooltip_" + Math.floor(Math.random() * (9999 - 2000 + 1) + 2000), ready: false, timer: null, title: '' }; 

    $(this).each(function (e) {  

     var $this = $(this); 
     tooltip.title = $this.attr('title') || ''; 

     $this.mouseenter(function (e) {     

     if (tooltip.ready) { 
      var $tooltip = $("#" + tooltip.id); 
     } else { 
      var $tooltip = $("<div>").attr("id", tooltip.id).attr("class", options.class).appendTo('body'); 
      $tooltip.html(tooltip.title); 
      tooltip.ready = true; 
      $this.attr('title', ''); 
     } 

     var position = [e.clientX + options.offset[0], e.clientY + options.offset[1]]; 

     $tooltip.css({ left: position[0] + 'px', top: position[1] + 'px' }); 

     tooltip.timer = window.setTimeout(function() { 
      options.show($this, $tooltip.stop(true, true)); 
     }, options.delay[0] || 0); 

     $("#" + tooltip.id).mouseenter(function() { 
      window.clearTimeout(tooltip.timer); 
      tooltip.timer = null; 
     }); // Tooltip enter 

     $("#" + tooltip.id).mouseleave(function() { 
      tooltip.timer = setTimeout(function() { 
      options.hide($this, $tooltip); 
      }, 0); 
     }); 

     }), // Mouse enter 

     $this.mouseleave(function (e) { 
     tooltip.timer = setTimeout(function() { 
      options.hide($this, $("#" + tooltip.id).stop(true, true)); 
     }, options.delay[1] || 0); 
     }) // Mouse leave 

    }); // Each 

    }; // Tooltip 

})(jQuery); // JQuery 

И Html выглядит следующим образом:

<table> 
    <tr><td><a href="#" title="Tooltip 01 Text">Tooltip 01</a></td></tr> 
    <tr><td><a href="#" title="Tooltip 02 Text">Tooltip 02</a></td></tr> 
    <tr><td><a href="#" title="Tooltip 03 Text">Tooltip 03</a></td></tr> 
    <tr><td><a href="#" title="Tooltip 04 Text">Tooltip 04</a></td></tr> 
    <tr><td><a href="#" title="Tooltip 05 Text">Tooltip 05</a></td></tr> 
</table> 

Спасибо!

Answer 1

у вас есть var tooltip definded вне цикла this.each, что означает, что будет только один tooltip экземпляру

(function ($) { 

    $.fn.Tooltip = function (options) { 

    var defaults = {   
     class: 'Tooltip', 
     delay: [200, 200], 
     offset: [0, -10], 
     hide: function ($element, $tooltip) { 
     $tooltip.fadeOut(200); 
     }, 
     show: function ($element, $tooltip) { 
     $tooltip.fadeIn(200); 
     } 
    }; 

    var options = $.extend({}, defaults, options); 

    $(this).each(function (e) {  
     //moved this inside the loop 
     var tooltip = { id: "Tooltip_" + Math.floor(Math.random() * (9999 - 2000 + 1) + 2000), ready: false, timer: null, title: '' }; 

     var $this = $(this); 
     tooltip.title = $this.attr('title') || ''; 

     $this.mouseenter(function (e) {     

     if (tooltip.ready) { 
      var $tooltip = $("#" + tooltip.id); 
     } else { 
      var $tooltip = $("<div>").attr("id", tooltip.id).attr("class", options.class).appendTo('body'); 
      $tooltip.html(tooltip.title); 
      tooltip.ready = true; 
      $this.attr('title', ''); 
     } 

     var position = [e.clientX + options.offset[0], e.clientY + options.offset[1]]; 

     $tooltip.css({ left: position[0] + 'px', top: position[1] + 'px' }); 

     tooltip.timer = window.setTimeout(function() { 
      options.show($this, $tooltip.stop(true, true)); 
     }, options.delay[0] || 0); 

     $("#" + tooltip.id).mouseenter(function() { 
      window.clearTimeout(tooltip.timer); 
      tooltip.timer = null; 
     }); // Tooltip enter 

     $("#" + tooltip.id).mouseleave(function() { 
      tooltip.timer = setTimeout(function() { 
      options.hide($this, $tooltip); 
      }, 0); 
     }); 

     }), // Mouse enter 

     $this.mouseleave(function (e) { 
     tooltip.timer = setTimeout(function() { 
      options.hide($this, $("#" + tooltip.id).stop(true, true)); 
     }, options.delay[1] || 0); 
     }) // Mouse leave 

    }); // Each 

    }; // Tooltip 

})(jQuery); 

Демо: CodePen