title: Tooltip causes bootstrap3 nav list-items to bounce on hover
body: <p>I added tooltips to the <code>&lt;li&gt;</code> elements of my boostrap navbar and noticed that the list-items bounce when the tooltip shows.  I would like to have tooltips on a bootstrap menu without the bounce.</p>
  
  <p>Example Code:
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* Latest compiled and minified JavaScript included as External Resource */
  $(document).ready(function(){
      $('[data-toggle="tooltip"]').tooltip();   
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="container"&gt;
  &lt;p&gt;
  Hover over menu items to activate tooltip. &lt;/p&gt;&lt;p&gt;
  
  The 2px margin-top is removed from li+li styling when tooltip div is appended to dom.  
  &lt;/p&gt;
  
  &lt;nav class="navbar navbar-default hidden-print"&gt;
  &lt;div id="navbartemplate" class="collapse navbar-collapse"&gt;
  
          &lt;ul class="nav nav-pills nav-stacked nav-custom"&gt;
  
    &lt;li&gt;&lt;a class="active" href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li data-toggle="tooltip" data-placement="top" title="Your mailing address on file"&gt;&lt;a href="#news"&gt;News&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/nav&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>