Add Multiple Elements to Page

Add Multiple Elements to Page

Hello,

I have created a JQuery tooltip plugin and I am applying it to a few A tags.

For each A tag there should be a different tooltip associated with it so I have:

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

Where the tooltip id includes a random number created as follows:

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

The plugin does not behave well. I checked the HTML added to the page.

Only one tooltip is being added to the page ... Always the same.

How can I fix this? What am I doing wrong?
I have an example in: http://codepen.io/mdmoura/pen/wgapv

And the plugin code is the following:

  1.     $(document).ready(function () {
  2.       $("table a").Tooltip();
  3.     });
  4.     // Tooltip
  5.     (function ($) {
  6.      
  7.       $.fn.Tooltip = function (options) {
  8.         var defaults = {         
  9.           class: 'Tooltip',
  10.           delay: [200, 200],
  11.           offset: [0, -10],
  12.           hide: function ($element, $tooltip) {
  13.             $tooltip.fadeOut(200);
  14.           },
  15.           show: function ($element, $tooltip) {
  16.             $tooltip.fadeIn(200);
  17.           }
  18.         };
  19.         var options = $.extend({}, defaults, options);  
  20.         var tooltip = { id: "Tooltip_" + Math.floor(Math.random() * (9999 - 2000 + 1) + 2000), ready: false, timer: null, title: '' };
  21.         $(this).each(function (e) {    
  22.           var $this = $(this);
  23.           tooltip.title = $this.attr('title') || '';
  24.           $this.mouseenter(function (e) {                 
  25.             if (tooltip.ready) {
  26.               var $tooltip = $("#" + tooltip.id);
  27.             } else {
  28.               var $tooltip = $("<div>").attr("id", tooltip.id).attr("class", options.class).appendTo('body');
  29.               $tooltip.html(tooltip.title);
  30.               tooltip.ready = true;
  31.               $this.attr('title', '');
  32.             }
  33.             var position = [e.clientX + options.offset[0], e.clientY + options.offset[1]];
  34.            
  35.             $tooltip.css({ left: position[0] + 'px', top: position[1] + 'px' });
  36.             tooltip.timer = window.setTimeout(function () {
  37.               options.show($this, $tooltip.stop(true, true));
  38.             }, options.delay[0] || 0);
  39.                          
  40.             $("#" + tooltip.id).mouseenter(function () {
  41.               window.clearTimeout(tooltip.timer);
  42.               tooltip.timer = null;
  43.             }); // Tooltip enter
  44.        
  45.             $("#" + tooltip.id).mouseleave(function () {
  46.               tooltip.timer = setTimeout(function () {
  47.                 options.hide($this, $tooltip);
  48.               }, 0);
  49.             });
  50.  
  51.           }), // Mouse enter
  52.        
  53.           $this.mouseleave(function (e) {
  54.             tooltip.timer = setTimeout(function () {
  55.               options.hide($this, $("#" + tooltip.id).stop(true, true));
  56.             }, options.delay[1] || 0);
  57.           }) // Mouse leave 
  58.         }); // Each
  59.       }; // Tooltip
  60.  
  61.     })(jQuery); // JQuery

And the HTMl is the following:

  1.     <table>
  2.       <tr><td><a href="#" title="Tooltip 01 Text">Tooltip 01</a></td></tr>
  3.       <tr><td><a href="#" title="Tooltip 02 Text">Tooltip 02</a></td></tr>
  4.       <tr><td><a href="#" title="Tooltip 03 Text">Tooltip 03</a></td></tr>
  5.       <tr><td><a href="#" title="Tooltip 04 Text">Tooltip 04</a></td></tr>
  6.       <tr><td><a href="#" title="Tooltip 05 Text">Tooltip 05</a></td></tr>
  7.     </table>

Thank you,
Miguel