title: bootstrap, tooltip with dropdown, in button group seems to have an effect
body: <p>In bootstrap, tooltip with dropdown,  the hover data-toggle attached to one button in a button group seems to have an effect when I hover mouse on the button that is responsible for tool tip then it also adjust its position that does not look good. Please help me.</p>
  
  <p>Here is my code:-</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;    
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link href="css/bootstrap.css" rel="stylesheet" media="screen"/&gt;
      &lt;link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="btn-group"&gt;
        &lt;a href="#" class="btn btn-small btn-inverse add1" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Add to Selected Contacts"&gt;Add&lt;/a&gt;
        &lt;a class="btn  btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"&gt;
            &lt;span class="caret"&gt;&lt;/span&gt;
        &lt;/a&gt;
   &lt;a href="#" class="btn btn-small btn-inverse add1" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Add to Selected Contacts"&gt;Add&lt;/a&gt;
   &lt;a class="btn  btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"&gt;
            &lt;span class="caret"&gt;&lt;/span&gt;
     &lt;/a&gt;
   &lt;/div&gt;                                            
  &lt;script type="text/javascript" src="js/jQuery v1.9.1.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/bootstrap.js"&gt;&lt;/script&gt;
     &lt;script type="text/javascript"&gt;
      // tooltip demo
      $('.add1').tooltip()
    &lt;/script&gt;                               
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>