title: Nested Bootstrap Tooltip divs Toggles Parent div's Tooltip
body: <ul>
  <li>I have 2 nested <code>&lt;div&gt;</code>s, both with <code>tooltip()</code>. </li>
  <li>When I hover over the
  inner <code>&lt;div&gt;</code>, the outer <code>&lt;div&gt;</code> also shows it's tooltip. </li>
  <li>I tried to work around this by setting the inner <code>&lt;div&gt;</code>'s title
  to an empty string on <code>:hover</code>.</li>
  </ul>
  
  <pre class="lang-js prettyprint-override"><code>$(inner).hover({
    $(outer).attr('title','');
  },{
    $(outer).attr('title','original title');
  });
  </code></pre>
  
  
  
  <p>I created a codepen <a href="http://codepen.io/warkentien2/pen/LGoGNd" rel="nofollow">example</a><br><br>note: I changed title to 'red' so you can see that the title did indeed change. </p>
  
  <ol>
  <li>Why is it that changing the title doesn't change tooltip's content?</li>
  <li>How do we change the Bootstrap Tooltip's content? (this should be a <strong>stackoverflow</strong> question of it's own)</li>
  </ol>