title: jquery ui tooltip on appended element - fiddle included
body: <p>I cannot make tooltip to work on appended element.</p>
  
  <p>Fiddle is here: <a href="http://jsfiddle.net" rel="nofollow">http://jsfiddle.net</a> + jeffz2012/4xwM9/8/ (cannot make this link to work)</p>
  
  <p>Code is here:</p>
  
  <pre>
  
  //css:
  //---------
  .mrg {
      margin: 15px;
  }
  .hand {
      cursor: pointer;
  }
  .help {
      cursor: help;
  }
  .brd {
      padding:7px;
      border: solid 1px #ccc;
  }
  
  
  
  //html:
  //---------
  &lt;div class="mrg tip brd help" title="I am a regular tooltip"&gt;point mouse here for non appended tooltip&lt;/div&gt;
  &lt;div id="trig" class="mrg hand brd"&gt;now click here, to append another div&lt;/div&gt;
  &lt;div id="rec" class="mrg" title="I am appended tooltip, but I do not work"&gt;&lt;/div&gt;
  
  
  
  //jquery
  //---------
  $('#trig').on('click', function() {
      $('#rec').append('&lt;div class="help brd tip"&gt;this is appended element and should show tooltip on hover&lt;/div&gt;');
  });
  
  $( '.tip' ).tooltip({
      open: function( event, ui ) {
          ui.tooltip.animate({
              top: ui.tooltip.position().top + 10
          }, "fast" );
      },
      position: {
          my: "center botto", 
          at: "center top+10",
          collision: "flipfit"
      }
  
  });
  
  </pre>