<p dir="auto">The default placement of the Tool tip <code class="notranslate">&lt;div /&gt;</code> next to the titled element is causing <code class="notranslate">.btn</code> elements in a <code class="notranslate">.btn-group</code> to lose some styling. Specifically the last button loses it's <code class="notranslate">border-radius</code> and the middle one appears to either lose some negative margin or grows an extra <code class="notranslate">border-right</code>.</p>
<p dir="auto">This is the mark-up in question</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;btn-group&quot;&gt;
    &lt;a class=&quot;btn&quot; href=&quot;/foo&quot;&gt;&lt;i class=&quot;icon-globe&quot;&gt;&lt;/i&gt; &lt;span class=&quot;hidden-phone&quot;&gt;View&lt;/span&gt;&lt;/a&gt;
    &lt;a class=&quot;btn&quot; href=&quot;/bar&quot; title=&quot;Edit&quot;&gt;&lt;i class=&quot;icon-edit&quot;&gt;&lt;/i&gt;&lt;span class=&quot;hidden-phone&quot;&gt;Edit&lt;/span&gt;&lt;/a&gt;
    &lt;button class=&quot;btn&quot; type=&quot;submit&quot; title=&quot;Delete&quot;&gt;&lt;i class=&quot;icon-remove&quot;&gt;&lt;/i&gt; &lt;span class=&quot;hidden-phone&quot;&gt;Delete&lt;/span&gt;&lt;/button&gt;
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div class="btn-group"&gt;
    &lt;a class="btn" href="/foo"&gt;&lt;i class="icon-globe"&gt;&lt;/i&gt; &lt;span class="hidden-phone"&gt;View&lt;/span&gt;&lt;/a&gt;
    &lt;a class="btn" href="/bar" title="Edit"&gt;&lt;i class="icon-edit"&gt;&lt;/i&gt;&lt;span class="hidden-phone"&gt;Edit&lt;/span&gt;&lt;/a&gt;
    &lt;button class="btn" type="submit" title="Delete"&gt;&lt;i class="icon-remove"&gt;&lt;/i&gt; &lt;span class="hidden-phone"&gt;Delete&lt;/span&gt;&lt;/button&gt;
&lt;/div&gt;
</code></pre></div>
<p dir="auto">There is a workaround in specifying the <code class="notranslate">container</code> option in the <code class="notranslate">.tooltip()</code> function.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="$('[title]').tooltip({ container : 'body' });"><pre class="notranslate"><code class="notranslate">$('[title]').tooltip({ container : 'body' });
</code></pre></div>
<p dir="auto"><a href="http://jsfiddle.net/JEBdk/5/" rel="nofollow">http://jsfiddle.net/JEBdk/5/</a></p>
<p dir="auto">tooltip or popover on btn-group. the btn-group is not display correctly!<br>
the last btn have not round corners and between the btn's is a space.</p>
<p dir="auto">my suggestion, by generating the tip or popover on the end of document .</p>