JQuery tooltip (jQueryTool) error multiple instances on table

Question

I'm using the jQuery function tooltip developed by "jquerytools" (http://jquerytools.org/download/) and I'm trying to call multiple callback on each row of the first column in a table.

This is the javascript source:

$('#table1 tr td:nth-child(1)').each(function(){
    $(this).tooltip({
      bounce: "false",
      tip: $(this).children('.tableTooltip'),
      position: 'center right',
      offset: [0, 0],
      effect: "fade",
      relative: true,
      opacity: 1,
      delay: 300
    });
});

And this the table:

<table id="table1">

  <tr><td> 
      Some content
      <div class="tooltip tableTooltip">
        <table><tr><td>My tooltip table</td></tr></table>
      </div>
  </td></tr>

  <tr><td> 
      Some other content
      <div class="tooltip tableTooltip">
        <table><tr><td>My other tooltip table</td></tr></table>
      </div>
  </td></tr>

</table>

The code seems to works, and when I go with the cursor over the first colum of the main table, it appear the tooltip. But when I move the cursor over the tooltip I receive this error from Firebug:

uncaught exception: Cannot find tooltip for [object Object]

Anybody can help me? Any hints are really appreciated!

Answer 1

This may have something to do with initialization, as I noticed that the tooltips only activate after mouseover. I made some changes to remove any issues during initialization by hiding the tooltip and also changing the tooltip to not use a table, which may have been selected by your jquery selector as well.

http://jsbin.com/ewagex/4 <- test here http://jsbin.com/ewagex/4/edit <-edit here

  <table id="table1">

  <tr><td> 
      Some content
      <div class="tooltip tableTooltip">
        <div>My tooltip table</div>
      </div>
  </td></tr>

  <tr><td> 
      Some other content
      <div class="tooltip tableTooltip">
        <div>My other tooltip table</div>
      </div>
  </td></tr>

  <script>
    $('#table1 tr td:nth-child(1)').each(function(){
    $(this).children('.tableTooltip').hide();
    $(this).tooltip({
      bounce: "false",
      tip: $(this).children('.tableTooltip'),
      position: 'center right',
      offset: [0, 0],
      effect: "fade",
      relative: true,
      opacity: 1,
      delay: 300
    });
});
    </script>