title: Destroy All Bootstrap Tooltips in A Div
body: <p>I have a <code>$("#settings")</code> div with multiple bootstrap tooltips attached to the child elements.</p>
  
  <p>For example,</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="settings" style="display: flex;"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td width="25%" class="left Special" style="font-size:150%"&gt;Content:&lt;/td&gt;
        &lt;td width="5%"&gt;&lt;/td&gt;
        &lt;td width="70%" class="Special settingswrong" style="font-size:200%"&gt;&lt;div style="display:inline" data-toggle="tooltip" data-placement="right" title="" data-original-title="This is not what you are looking for!"&gt;Content&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td width="25%" class="left Special" style="font-size:150%"&gt;Content:&lt;/td&gt;
        &lt;td width="5%"&gt;&lt;/td&gt;
        &lt;td width="70%" class="Special settingswrong" style="font-size:200%"&gt;&lt;div style="display:inline" data-toggle="tooltip" data-placement="right" title="" data-original-title="This is not what you are looking for!"&gt;Content&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to do <code>$("#settings").tooltip('destroy')</code> to get rid of all these tooltips on a button press, but it doesn't work, I'm assuming because the tooltips aren't <em>actually on</em> the settings div, but inside it.</p>
  
  <p>However I also tried <code>$('#settings').find('*').tooltip('destroy')</code> and that didn't work either.</p>
  
  <p>Is it because of how I am initializing them?</p>
  
  <pre><code>$(document).ready(function() {
      $("body").tooltip({ selector: '[data-toggle=tooltip]' });
  });
  </code></pre>
  
  <p>What is a fast and easy way to access all the tooltips within a div?</p>