title: How to remove/hide bootstrap tooltip when element is removed from the DOM
body: <p>I'm currently working on a project in ReactJS. Some of my components are not rendered all the time but change dynamically based on certain conditions. When these components have a tool tip attached to them, I'm noticing that if the tooltip was active when the element was hidden, the tooltip does not go away. I'm looking for a way to remove or at least hide this tooltip when the element is not being rendered.</p>
  
  <p>This is how I'm activating the tooltips using jQuery:</p>
  
  <pre><code>$(document).ready(function() {
        $("body").tooltip({ selector: '[data-toggle=tooltip]', placement: 'bottom' })
      })
  </code></pre>
  
  <p>This is how I'm using it within the html (or jsx):</p>
  
  <pre><code>&lt;a className="icon-btn" onClick={ () =&gt; {
  //on Click I remove this parent element and show something else
  }}&gt;
  &lt;i className="fa fa-lg fa-pencil-square" title="Edit" data-toggle="tooltip"&gt;&lt;/i&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>Note I have not been able to select all elements by tooltip using:</p>
  
  <pre><code>$('[data-toggle=tooltip]').tooltip()
  </code></pre>
  
  <p>Apparently that is because I am adding elements dynamically? At least that is what my research so far shows</p>