<p dir="auto">The content of a popover is invisible when the popover is on a .input-append input node.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/7dddc83c245c1f6c26bb35abe778b9dac0fba4803d958505c623e6a9a0b861bf/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f34353734302f3131313437312f30363661383061302d366166372d313165322d383531662d6433383864326465363661652e706e67"><img src="https://camo.githubusercontent.com/7dddc83c245c1f6c26bb35abe778b9dac0fba4803d958505c623e6a9a0b861bf/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f34353734302f3131313437312f30363661383061302d366166372d313165322d383531662d6433383864326465363661652e706e67" alt="githubissue" data-canonical-src="https://f.cloud.github.com/assets/45740/111471/066a80a0-6af7-11e2-851f-d388d2de66ae.png" style="max-width: 100%;"></a></p>
<p dir="auto">I think it's because the font-size on .input-append is set to 0.</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".input-append, .input-prepend {
    font-size: 0;
    white-space: nowrap;
}"><pre class="notranslate">.<span class="pl-c1">input-append</span><span class="pl-kos">,</span> .<span class="pl-c1">input-prepend</span> {
    <span class="pl-c1">font-size</span><span class="pl-kos">:</span> <span class="pl-c1">0</span>;
    <span class="pl-c1">white-space</span><span class="pl-kos">:</span> nowrap;
}</pre></div>
<p dir="auto">This issue is similar to <a href="https://github.com/twitter/bootstrap/issues/5807" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/5807/hovercard">this issue with datepicker</a></p>
<p dir="auto">There was a fix made in 2.2.2 to address 0 font size for popovers within a btn group:</p>
<p dir="auto"><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="8447581" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/5939" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/5939/hovercard" href="https://github.com/twbs/bootstrap/issues/5939">#5939</a></p>
<p dir="auto">I don't think the fix was comprehensive as it still happens in other situations. Here's an example within an input-append form element:</p>
<p dir="auto"><a href="http://jsfiddle.net/YUS87/" rel="nofollow">http://jsfiddle.net/YUS87/</a></p>