title: How do I bind Twitter Bootstrap tooltips to dynamically created elements?
body: <p>I'm using Twitter bootstrap tooltips with javascript like the following:</p>
  
  <pre><code>$('a[rel=tooltip]').tooltip();
  </code></pre>
  
  <p>My markup looks like this:</p>
  
  <pre><code>&lt;a rel="tooltip" title="Not implemented" class="btn"&gt;&lt;i class="icon-file"&gt;&lt;/i&gt;&lt;/a&gt;
  </code></pre>
  
  <p>This works fine, but I add <code>&lt;a&gt;</code> elements dynamically and the tooltips aren't showing up for those dynamic elements.  I know it's because I only bind .tooltip() once when the document is finished loaded with the typical jquery <code>$(document).ready(function()</code> functionality.</p>
  
  <p>How can I bind this to dynamically created elements?  Usually I would do this via the jquery live() method.  However, what is the event that I use to bind?  I'm just not sure how to hook up the bootstrap .tooltip() with jquery .live().</p>
  
  <p>I've found one way to make this work is something like this:</p>
  
  <pre><code>/* Add new 'rows' when plus sign is clicked */
  $("a.add").live('click', function () {
      var clicked_li = $(this).parent('li');
      var clone = clicked_li.clone();
  
      clone.find(':input').each(function() {
          $(this).val('');
      });
  
      clicked_li.after(clone);
      $('a[rel=tooltip]').tooltip();
  });
  </code></pre>
  
  <p>This works, but seems kind of hackish.  I'm also calling the exact same .tooltip() line in the $(ready) call.  So, do the elements that exist when the page first loads and match that selector end up with the tooltip twice?</p>
  
  <p>I don't see any problems with this approach.  I'm just looking for a best practice or understanding of the behavior.</p>