title: Add bootstrap tooltip to dynamically created button
body: <p>I dynamically create buttons like this: </p>
  
  <pre><code>var my_button = document.createElement('button');
  my_button.setAttribute('id', "the_id");
  </code></pre>
  
  <p>I am trying to use Bootstrap tooltips with these buttons but I cannot get it to work. </p>
  
  <pre><code>my_button.setAttribute('data-toggle', 'tooltip');
  my_button.setAttribute('data-placement', 'top');
  my_button.setAttribute('title', 'this is my text');
  </code></pre>
  
  <p>In $(document).ready(function() I have </p>
  
  <pre><code>$('[data-toggle="tooltip"]').tooltip();
  </code></pre>
  
  <p>And to try and deal with the fact that the buttons are dynamically created I use: </p>
  
  <pre><code>$('body').tooltip({ selector: '[rel=tooltip]' });
  </code></pre>
  
  <p>I have sourced all the necessary bootstrap files, and tested the tooltip using text element tag, and that works fine. </p>
  
  <p>When I hover over the button nothing happens.</p>