<p dir="auto">Elements that trigger tooltips/popovers, as well as child elements in popovers, seem to be incorrectly affected by the <code class="notranslate">input-append</code> class. These elements lose their top-right and bottom-right <code class="notranslate">border-radius</code> when their associated tooltip/popover displays.</p>
<p dir="auto">Here is a jsFiddle that shows the issue: <a href="http://jsfiddle.net/gb2YN/" rel="nofollow">http://jsfiddle.net/gb2YN/</a></p>
<p dir="auto">Reproducible with Bootstrap 2.2.2 in Chrome 24, Firefox 18.0.2, and IE9.</p>
<p dir="auto">Doesn't appear to have been fixed in 2.3.0-wip yet.</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;input-append&quot;&gt;
    &lt;select class=&quot;input-medium required&quot;&gt;
        &lt;option value=&quot;&quot;&gt;--Select--&lt;/option&gt;
    &lt;/select&gt;
    &lt;span class=&quot;add-on&quot;&gt;Test&lt;/span&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">input-append</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">select</span> <span class="pl-c1">class</span>="<span class="pl-s">input-medium required</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">option</span> <span class="pl-c1">value</span>=""<span class="pl-kos">&gt;</span>--Select--<span class="pl-kos">&lt;/</span><span class="pl-ent">option</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">select</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">add-on</span>"<span class="pl-kos">&gt;</span>Test<span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="$('span.add-on').tooltip({
    placement: 'bottom',
    title: 'Test'
});​"><pre class="notranslate"><span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">'span.add-on'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">tooltip</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">placement</span>: <span class="pl-s">'bottom'</span><span class="pl-kos">,</span>
    <span class="pl-c1">title</span>: <span class="pl-s">'Test'</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>​</pre></div>
<p dir="auto">Using this code, the tooltip will work fine, but the rounded-corners will be removed from the span.addon due to this selector:</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".input-append .last-child, .input-append .btn:last-child {
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
}"><pre class="notranslate">.<span class="pl-c1">input-append</span> .<span class="pl-c1">last-child</span><span class="pl-kos">,</span> .<span class="pl-c1">input-append</span> .<span class="pl-c1">btn</span><span class="pl-kos">:</span><span class="pl-c1">last-child</span> {
    <span class="pl-c1">-webkit-border-radius</span><span class="pl-kos">:</span> <span class="pl-c1">0</span> <span class="pl-c1">3<span class="pl-smi">px</span></span> <span class="pl-c1">3<span class="pl-smi">px</span></span> <span class="pl-c1">0</span>;
    <span class="pl-c1">-moz-border-radius</span><span class="pl-kos">:</span> <span class="pl-c1">0</span> <span class="pl-c1">3<span class="pl-smi">px</span></span> <span class="pl-c1">3<span class="pl-smi">px</span></span> <span class="pl-c1">0</span>;
    <span class="pl-c1">border-radius</span><span class="pl-kos">:</span> <span class="pl-c1">0</span> <span class="pl-c1">3<span class="pl-smi">px</span></span> <span class="pl-c1">3<span class="pl-smi">px</span></span> <span class="pl-c1">0</span>;
}</pre></div>
<p dir="auto">When the span.addon is hovered over, it is no longer the last child and thus the selector is instead applied to the tooltip div. My suggested fix for this (IE8+, FF3.5+, CH2+) is below:</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".input-append .add-on:last-of-type, .input-append .btn:last-child {
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
}"><pre class="notranslate">.<span class="pl-c1">input-append</span> .<span class="pl-c1">add-on</span><span class="pl-kos">:</span><span class="pl-c1">last-of-type</span><span class="pl-kos">,</span> .<span class="pl-c1">input-append</span> .<span class="pl-c1">btn</span><span class="pl-kos">:</span><span class="pl-c1">last-child</span> {
    <span class="pl-c1">-webkit-border-radius</span><span class="pl-kos">:</span> <span class="pl-c1">0</span> <span class="pl-c1">3<span class="pl-smi">px</span></span> <span class="pl-c1">3<span class="pl-smi">px</span></span> <span class="pl-c1">0</span>;
    <span class="pl-c1">-moz-border-radius</span><span class="pl-kos">:</span> <span class="pl-c1">0</span> <span class="pl-c1">3<span class="pl-smi">px</span></span> <span class="pl-c1">3<span class="pl-smi">px</span></span> <span class="pl-c1">0</span>;
    <span class="pl-c1">border-radius</span><span class="pl-kos">:</span> <span class="pl-c1">0</span> <span class="pl-c1">3<span class="pl-smi">px</span></span> <span class="pl-c1">3<span class="pl-smi">px</span></span> <span class="pl-c1">0</span>;
}</pre></div>
<p dir="auto"><a href="http://jsfiddle.net/GY3pF/" rel="nofollow">JSFiddle</a></p>