Bootstrap tooltip hover issue when apply on button which is part of button group
<p>I applied a tooltip to a button which is a part of button group like:</p>

<pre><code>&lt;div class="btn-group pull-right"&gt;
      &lt;button class="btn btn-primary btn-xs dropdown-toggle" aria-expanded="false" data-toggle="dropdown" data-tooltip="tooltip" data-placement="left" title="tooltip test 123"&gt;
         &lt;span class="caret"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;ul class="dropdown-menu" role="menu" style="height: 200px; overflow-y: auto;"&gt;
         &lt;li&gt;Test&lt;/li&gt;
      &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>and JS:</p>

<pre><code>$(function(){
    $(".btn").tooltip();
});
</code></pre>

<p>and jsfiddle: <a href="https://jsfiddle.net/4Lo9dkf2/" rel="nofollow">https://jsfiddle.net/4Lo9dkf2/</a></p>

<p>When you hover that button, you'll see that tooltip is not positioned correctly and you cannot click on that button to trigger a dropdown.</p>

<p>What should I do ?</p>