title: Bootstrap Tooltip Not Working with Font Awesome Icon
body: <p>I am using bootstrap tooltip but I cannot seem to get it to work with a font awesome icon. </p>
  
  <p>I can get this to work: </p>
  
  <pre><code> &lt;a data-container="body" data-toggle="popover" data-placement="top" title="Other Prep" data-content="Indicates whether or not this product get other prep before shipment" data-original-title=""&gt;Info&lt;/a&gt;
  </code></pre>
  
  <p>But this does not work: </p>
  
  <pre><code> &lt;a data-container="body" data-toggle="popover" data-placement="top" title="Other Prep" data-content="Indicates whether or not this product get other prep before shipment" data-original-title=""&gt;&lt;i class="fa fa-info-circle"&gt;&lt;/i&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Here is my javascript: </p>
  
  <pre><code>$(function(){
      $('[data-toggle="popover"]').popover();
      $('body').on('click', function (e) {
          if ($(e.target).data('toggle') !== 'popover'
                  &amp;&amp; $(e.target).parents('.popover.in').length === 0) {
              $('[data-toggle="popover"]').popover('hide');
          }
      });
  });
  </code></pre>
  
  <p>Does anyone have any help they can shoot me to help me understand why this doesn't work. </p>
  
  <p>Thanks!</p>